Styling options for a large React app?

Question

css

There is a react web application, it has a bad styling structure, the usual bam + scss is used, but 5 different components can be mixed in one style file and as a result it is very difficult to edit the styles, there is so much code that you have to use !important, then that you don’t understand where-what-how is stylized.
Later, a react-native web application is planned. What are the styling options? I thought to use styled-component, they would be good for native, but the application is large, it seems to me that it will not be very convenient to use styled-component for the web version. What's the best way to style?

Answer 1

Break the styles so that there are styles for one component in one file.
Enable css - modules, remove 99% of the problems.
farther

import styles from './mybutton.module.scss'
...
<div className={styles.title}>
...

Move common styles to variables and mixins.
styling child components from the parent can be done either by passing a class from props,
or by adding separate props, for example, <button outlined/>
in general, the second way is preferable, if you have a lot where the parent hangs explicit styles on child components - then there is definitely something wrong in the structure styles.
styled-components is normal for mobile phones, I personally don't like it for the web, extra code.

Answer 2

I like css-in-js the most, if you work with React with hooks, then you can implement css-in-js on hooks. There are many options, but it's better to isolate the styles in the component, you don't have to use variables from scss, it's much easier to use this scheme: the useWindowSize hook (it's easy to google), and then just create a few variables and a handler function:
import useWindowSize from 'yourPathHere/hooks/useWindowSize '

const App = () => {
   const size = useWindowSize()

   const [width, setWidth] = useState(null)
   const [height, setHeight] = useState(null)
   const [direction, setDirection] = useState(null)
   useEffect(() => {
       if (size.width > 1200) {
         setWidth('500px')
         setHeight('300px')
         setDirection('row')
       } else if (size.width > 900 && size.width <= 1200) {
       setWidth('100%')
       setHeight('250px')
       setDirection('column')
      } 
      } else return
   }, [ size.width ])
   // yourCodeHere
}

// Потом в стилях задаете:
  text_block: {
    width: width
    height: height,
    display: 'flex',
    flexDirection: direction
  }

And the adaptive layout is ready )
You can use it with and without UI libraries, as you like. I use MaterialUI in my projects.
But this option is only for functional components.

Answer 3

https://is.gd/dAvYoZ