CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
tongchimlang
tongchimlang

Reputation: 11

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

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

Upvotes: 0

Views: 535

Answers (3)

Arjav
Arjav

Reputation: 13

If you want childrens to be styled you can use following code :

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

but remember this will style both the class i.e. the props style that you have passed as well as the style of ".navbar_list_class", rather you can remove the props style or make conditional style in ".navbar_list_class" itself.

although this might not be the most idiomatic or best approach.

Upvotes: 0

sasa
sasa

Reputation: 459

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

Should work with &.navbar_list_class

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

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

Upvotes: 0

Ali Adel Elroby
Ali Adel Elroby

Reputation: 1

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

Try This

Upvotes: 0

Related Questions