如何在 React 中的样式组件中使用组件中的 className？

Question

NavStyles.js

从“样式组件”导入样式；

导出 const Nav = styled.nav

width: 100%;   

;

导出 const NavMenuMobile = styled.ul`

    height: 80px;

    .navbar_list_class {
        font-size: 2rem;
        background-color: red;
    }   
      
    ${props => props.navbar_list_props && `  
        font-size: 2rem;
        background-color: gray;
    `}        

`;

Navbar.js 从“反应”导入反应 从“./NavStyles”导入{Nav，NavMenuMobile}；

const 导航栏 = () => {

return (
    <Nav>
        {/* work no problem */}
        <NavMenuMobile navbar_list_props>Nav Bar props</NavMenuMobile>

        {/* not work How to use..? */} 
        <NavMenuMobile className="navbar_list_class">Nav Bar class</NavMenuMobile>
    </Nav>
)

}

导出默认导航栏

Answer 1

<Nav>
    <NavMenuMobile className={navbar_list_props}>Nav Bar props</NavMenuMobile>
</Nav>

试试这个

Answer 2

看起来您正在使用“navbar_list_class”类为 NavMenuMobile 中的子项设置样式。

应与 &.navbar_list_class 一起使用

export const NavMenuMobile = styled.ul`
  height: 80px;

  &.navbar_list_class {
    font-size: 2rem;
    background-color: red;
  }   
`;

Answer 3

如果您想要儿童的样式，您可以使用以下代码：

<Nav>
        {/* work no problem */}
        <NavMenuMobile navbar_list_props>Nav Bar props</NavMenuMobile>

        {/* code updated here */}
        <NavMenuMobile navbar_list_props>
            Nav Bar class
            <ul className="navbar_list_class">Nav Bar list class</ul>
        </NavMenuMobile>
</Nav>

但请记住，这将为类（即您传递的 props 样式）以及“.navbar_list_class”的样式设置样式，而您可以删除 props 样式或在“.navbar_list_class”本身中创建条件样式。

尽管这可能不是最惯用或最好的方法。