CODEWITHSUNDEEP
csstwitter-bootstrapreactjsauth0
David Weiss
David Weiss

Reputation: 35

How do I set the style of children using css modules in a reactjs project using classNames and JSX

I am setting up a project with React JS and want to use auth0 to handle authentication (and maybe some serverless functions).

auth0 provides a nice "seed" project https://github.com/auth0-samples/auth0-react-sample that works basically out of the box.

The code for the main container uses JSX and loads css style from a module file. The module file provides the className classes that are used for styling.

I am extending the bootstrap layout with React-Bootstrap components, and am able to style some components using classNames syntax.

For example, I am styling a Navbar's background color like this:

Appending to the css module file /01-Login/src/views/Main/styles.module.css

.mainNavBar{
        background-color: rgb(45, 140, 210);                                                    
        border-color: rgb(45, 140, 210);                                                        
}

Then to the file containing JSX 01-Login/src/views/Main/Container.js

<Navbar className={styles.mainNavBar} fixedTop>
...
</Navbar>

However, when I try to style other inner elements, ie the text color,

I tried:

.mainMenuItem { 
        color: #fff;
}

And:

 <NavItem className={styles.mainMenuItem} eventKey={1} href="#">Link</NavItem>

It doesn't work. I think it is because I don't know how to reach the children of NavItem.

I tried this and variations of it:

.mainMenuItem ul > li > a { 
        color: #fff;
}

But it just doesn't seem to be the right way to do it, and doesn't work ( though an 'li' item got styled with the color at some point when inspected on the browser, but not the 'a' ...).

Finally, I tried inline styles (see related question Add inline style in reactjs without using JSX) but this seems to suffer from the same inheritance problem.

Thanks so much if you can point me in the right direction as I am confused.

Edit 19/07/2016

Looks like NavItem doesn't get the style elements...

I submitted an issue to react-bootstrap: https://github.com/react-bootstrap/react-bootstrap/issues/2070

Upvotes: 0

Views: 413

Answers (1)

David Weiss
David Weiss

Reputation: 35

I used inline styles with javascript syntax with Radium instead of passing standard css with the "Classname" attribute.

Upvotes: 0

Related Questions