如何在 React 的 styled-components 组件中使用 className？答案

【问题标题】：How can I use className in component from styled-components in React?如何在 React 的 styled-components 组件中使用 className？
【发布时间】：2022-01-26 06:39:06
【问题描述】：

NavStyles.js

从'styled-components'导入样式；

export const Nav = styled.navwidth: 100%; ;

export 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>
)

}

导出默认导航栏

【问题讨论】：

标签： javascript css reactjs styled-components

【解决方案1】：

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

应该使用 &.navbar_list_class

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

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

【讨论】：

【解决方案2】：

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

试试这个

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。