如何在另一个反应组件中设置一个反应组件的样式



我是 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>

谢谢。

据我了解,您可以在 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> ) 
}

您是否在 Component2 中添加了一些类/id <Component2 className="my-specific-class" />来设置它的样式?

(顺便说一句,我希望你的 css 更少/更糟糕,以允许像你一样嵌套样式)

编辑通过添加类名属性。到您的组件 2,我的意思是将其添加到组件 2 渲染方法中,例如

render: function() {
    return (
        <div id="your-id" className="your-class">
            some html here
        </div>
    );
}

相关内容

  • 没有找到相关文章

最新更新