ReactJS advanced custom styling

Question

Using reactjs only, is it possible to do advanced styling similar to

#primary-nav .list-group-item.active {}
// or
#secondary-nav .list-group-item:hover>.background-item {}

in the first example I could do some rather simple javascript logic to figure out if the component is "active" but on the second example it's just so much simpler with css.

Is there a clear react+js solution for these situations that comes close to the simplicity of css?

Explained [here](https://stackoverflow.com/questions/34521797/how-to-add-multiple-classes-to-a-reactjs-component) — silencedogood, Sep 19 '19 at 14:21
Are you looking for CSS in JS? Try styled-components: https://www.styled-components.com/ — BugsArePeopleToo, Sep 19 '19 at 15:18

Dupocas · Accepted Answer · 2019-09-19T22:20:06.200

className is applied exactly like a regular HTML class. So to correctly target .background-image like in

.list-group-item:hover>.background-item

Your jsx structure should look like

import './index.css'

const Component = () =>{
    return(
        <div className='list-group-item'>
            <div className='background-item' />
            <span>
                <div className='background-item' /> /*Targeting nested items '>' */
            </span>
         </div>
     )
}

You can use jss and clsx to have dynamic and conditional styles. Here is an example using MUI styles(hooks API), but you can use styled components, react-jss or implement you're own style's solution based on jss.

   import { makeStyles } from '@material-ui/styles'
   import clsx from 'clsx'

   const styles = {
       root:{
           color: 'white',
           '&:active':{
                color: 'red'
            }
       },

       hidden:{
           opacity: 0
       }
   }

   const useStyles = makeStyles(styles)

   const Component = ({ open }) =>{
       const classes = useStyles()

       const rootStyle = clsx({
           [classes.root] : true,
           [classes.hidden] : !open
       })

       return <div classsName={rootStyle} />
   }

jss also have lots of cool features like theming support, styles interpolation (a personal favorite), nested selectors, style's rules,etc. Definitely worth taking a look.

Notice that clsx doesn't require jss to work, it's just a helper to conditionally apply classes. You can use it like clsx({'foo' : true, 'bar': false})

I'm trying to add all the css to the component as well. Is that possible? — Jacksonkr, Sep 19 '19 at 21:32
yes, giving it a few days in hopes that you'll get some upvotes ( ; — Jacksonkr, Sep 20 '19 at 15:30
Glad to hear. Definitely take a look on `styles interpolation`, it plays really well with react — Dupocas, Sep 20 '19 at 15:44

ReactJS advanced custom styling

1 Answers1