BenderIsGreat34
@BenderIsGreat34
junior front-end

Варианты стилизации крупного React-приложения?

Есть веб-приложение на реакте, в нем плохая структура стилизации, используется обычный бэм + scss, но в одном файле стилей может быть намешано по 5 разных компонентов и в итоге стили править очень сложно, кода настолько много, что приходится юзать !important, потмоу что не понимаешь где-что-как стилизуется.
Позже планируется веб-приложение на react-native. Какие есть варианты стилизации? Думал юзать styled-component, они бы хорошо зашли для native, но приложение большое, мне кажется будет не очень удобно использовать styled-component для веб-версии. Как лучше стилизовать?
  • Вопрос задан
  • 312 просмотров
Решения вопроса 1
Robur
@Robur
Знаю больше чем это необходимо
Разбейте стили так чтобы в одном файле были стили для одного компонента.
Включите css - модули, уберете 99% проблем.
дальше
import styles from './mybutton.module.scss'
...
<div className={styles.title}>
...


Общие стили вынесите в переменные и миксины.
стилизацию дочерних компонентов из родителя можно делать либо прокидыванием класса из пропсов,
либо путем добавления отдельных пропсов, например <button outlined/>
в общем виде второй путь предпочтителен, если у вас много где родитель навешивает явные стили на дочерние компоненты - то тут определенно что-то не так в структуре стилей.

styled-components для мобилок норм, для веба мне лично не нравятся, лишний код.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@AlexCraft
Software engineer
Мне больше всего нравится css-in-js, если работаете на React с хуками, то можно реализовать css-in-js на хуках. Вариантов много, но лучше изолировать стили в компоненте, переменные не обязательно использовать из scss, гораздо проще использовать такую схему: хук useWindowSize (гуглится легко), а потом просто создаете несколько переменных и функцию-обработчик:

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
  }

И адаптивная верстка готова )
Это можно использовать и с UI-библиотеками и без них, как угодно. Я использую MaterialUI в своих проектах.
Но такой вариант только для функциональных компонентов.
Ответ написан
cannibal_corpse
@cannibal_corpse
Верстальщик руками
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы