title: Passing css styles from React Parent component to its child component
body: <p>I have React parent component <strong>A</strong> which has its own scss file <strong>a-style.scss</strong>. Component <strong>B</strong> is child of A. A is passing <strong>styleInfo</strong> object as props which is applied on B.</p>
  
  <p>My question is - is there any way we can define <strong>styleObj</strong> in a-style.scss instead of defining it inline. I want all styling related info should be in external scss file.</p>
  
  <p><strong>Component A</strong>  </p>
  
  <pre><code>import "./a-style.scss";
  import B from "./B.js";
  
  class A extends Component {
    constructor(props) {
      super(props);
    }
  
    const styleObj = {
      backgroundColor: "#F9F9F9",
      borderRadius: '2px',
      color: "#686868",
    };
  
    render() {
      return (&lt;B styleInfo={this.styleObj}&gt;&lt;/B&gt;);
    }
  }
  </code></pre>
  
  <p><strong>Component B</strong>  </p>
  
  <pre><code>class B extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return (&lt;div style={this.props.styleInfo}&gt;&lt;/div&gt;);
    }
  }
  </code></pre>