How can I use className in component from styled-components in React?-CodePudding

NavStyles.js

import styled from '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 import React from 'react' import {Nav, NavMenuMobile} from "./NavStyles";

const Navbar = () => {

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

}

export default Navbar

CodePudding user response：

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

Try This

CodePudding user response：

Looks like you are setting styles for the children within NavMenuMobile with class "navbar_list_props".

Should work with &.navbar_list_props

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

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