css - 如何在一个 react ​​组件中设置另一个组件的样式？

Question

我是 css 的新手，我不知道如何在 React 中将一个组件放置在另一个组件中。我可以单独展示它们，但是当我把一个放在另一个里面时。我没有看到里面的那个。我认为问题出在 css 文件中

#homePage{
   section{
      h1{
        text-align: left; //this is shown
      }
      //here I want to add the other React component but I don't know how

   }
}

渲染方法:

<div id="homePage">
  <Component1>
    <section>
     <h1>Hi</h1>
     <Component2>
     </Component2>
    </section>
  </Component1>
</div>

谢谢。

Answer 1

据我了解，您可以在 Component2 的 HTML 标记中定义 className 属性。

class Component2 extends Component{ 

render(){

    return(
        <section className="component2styles">
            This is Component2
        </section >
    );
} }

现在，您可以将您的样式表更改为

#homePage{
   section{
      h1{
        text-align: left; //this is shown
      }
      //components2 style will be nested here

     section.component2styles{
       border:1px solid blue;
     }

   }
}

或者作为替代方案，您可以尝试内联样式，它似乎在 React 开发中获得了很大的吸引力。

render(){
 var styleobj={color:'red'};
 return( <section style={styleobj} > This is Component 2 </section> ) 
}