Currently in the process of setting up a project using React JS and I am interested in incorporating auth0 for authentication purposes, along with potentially integrating some serverless functions.
auth0 conveniently offers a pre-made "seed" project at https://github.com/auth0-samples/auth0-react-sample that requires minimal setup to get started.
The main container's code utilizes JSX and pulls in CSS styles from a module file. This module file contains the className classes necessary for styling.
I am augmenting the bootstrap layout with React-Bootstrap components and have successfully styled certain components using classNames syntax.
As an example, I am adjusting the background color of a Navbar like so:
Adding this 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 within the JSX file
01-Login/src/views/Main/Container.js<Navbar className={styles.mainNavBar} fixedTop>
...
</Navbar>
However, when attempting to style other inner elements, such as text color,
I tried the following:
.mainMenuItem {
color: #fff;
}
And also:
<NavItem className={styles.mainMenuItem} eventKey={1} href="#">Link</NavItem>
Unfortunately, it did not produce the desired result. It appears that I may be struggling to target the children of NavItem.
I experimented with variations like:
.mainMenuItem ul > li > a {
color: #fff;
}
But it seems to be ineffective and doesn't apply the styles correctly (although an 'li' item seemed to inherit the color upon inspection through the browser, but not the 'a' ...).
As a last resort, I attempted inline styles (referenced a related question here Add inline style in reactjs without using JSX) but encountered similar issues with inheritance.
If you have any guidance or pointers on the correct approach, I would greatly appreciate it as I find myself entangled in confusion.
Edit 19/07/2016
It appears that NavItem is not responsive to the style changes...
I have raised an issue with react-bootstrap: https://github.com/react-bootstrap/react-bootstrap/issues/2070