Styled-components on text and Icons don't seem to work.

[pedrohba1]

I tried changing the styled component of the NavText, changing it's color doesn't do anything at all.

But for some some reason passing a style object to the style prop works fine

const TextStyle = {
    color: "#fff",
};

   <NavText style={TextStyle} title="Settings">
                                Settings
      </NavText>

but this does not work:

const StyledNavText = styled(NavText)`
    color: #49 ;
`;

how come one of them works and the other doesn't?

[moezlaarif]

For the icons you can put directly the component of the icon inside

Example :
import AddCircle from '@material-ui/icons/Add';

// inside the SideNav

<NavIcon> <Add></Add> </NavIcon>

[SurealCereal]

I managed to style icons and text in the same manner as the included example: https://github.com/trendmicro-frontend/react-sidenav/tree/master/examples/Styled
Its just a pity that so much code is required. Also the class names produced by styled-components are incredibly verbose. The babel-plugin-styled-components seems to have many issues atm which affect the class names.

Overall does using styled-components affect performance? It seems like a sledgehammer for a few nails.

I would definitely prefer the simplicity of plain old CSS - let us override styles with regular classes like blueprintjs does for example. Thus no special Babel plugin, and a sea of library dependencies, (http://npm.broofa.com/[email protected]) will be needed.

Btw, here is a related library which is an extreme opposite with regards to dependencies: https://github.com/wmira/react-sidenav Only React, although it does not provide as much "out of the box", thus 23KB vs 122KB.

[Liam-OShea]

@SurealCereal Can you please elaborate on how you were able to style the text?

I am trying to style the passive color of the text in the example you linked when it is not selected or being hovered on. Here is a screenshot of my sidebar:

I see that the color code (light red) for the text is in sidenav-navitem.styl .

> .navitem .navicon,
    > .navitem .navtext {
        color: #f9dcdd;
        > * {
            color: #f9dcdd;
        }
    }

I tried to change the color using styled-components on NavItem as follows but it didn't work.:

const StyledNavItem = styled(NavItem)`
    &&&:hover {
        [class*="navtext--"] {
            color: #222;
        }
    }

    // My changes below *************
    &&&:> .navitem .navicon,
    > .navitem .navtext {
        color: #fff;
        > * {
            color: #fff;
        }
    }
  }
`;

I am not sure how the syntax works when styling components with styled-components.