Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
pedrohba1 opened this issue Jun 1, 2020 · 3 comments
Open

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

pedrohba1 opened this issue Jun 1, 2020 · 3 comments

Comments

@pedrohba1
Copy link

pedrohba1 commented Jun 1, 2020

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

moezlaarif commented Jun 5, 2020

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

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

@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:
stylehelp
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants