Как перенести стили React-JSS в отдельный файл?

Мы с коллегами успешно используем React-JSS: https://cssinjs.org/react-jss

Однако на сегодняшний день стили были встроены в файлы компонентов React. По мере роста количества стилей мы хотели бы переместить их в файл styles.js или styles.css (нам все равно, в какой).

Попытка это пока не увенчалась успехом.

Может ли кто-нибудь, кто это сделал, дать несколько советов?


reactjs jss
person robertwerner_sf    schedule 13.08.2019    source источник
comment
Вы можете привести пример неуспешного. Напишите код, пожалуйста. Покажите нам, что не работает и как вы пытались это сделать.   -  person Train    schedule 13.08.2019

Ответы (2)


arrow_upward
11
arrow_downward

Похоже, у вас есть большие файлы с большим / большим количеством компонентов, и похоже, что проблема в количестве стилей.

Я бы сказал, что нужно разделить ваши компоненты на отдельные файлы и сохранить стили, близкие к компонентам.

Я не рекомендую повторно использовать стили без их компонентов, потому что это приводит к утечкам.

person Oleg Isonen    schedule 13.08.2019
comment
Спасибо за ответы. Я работаю над крайним сроком сегодня вечером, поэтому буду кратко. Текущий [рабочий] подход работает следующим образом: const styleSheet = { ... } (со многими стилями, определенными там, где стоит многоточие. Позже появляется такая строка: const styledComponent = injectSheet(styleSheet)(MyPageName); Все, что я хочу сделать, это переместить код styleSheet в отдельный файл styles.js и импортировать его в этот текущий файл JS, но я не мог заставить его работать. - person robertwerner_sf; 14.08.2019

arrow_upward
-1
arrow_downward

OMG, я не знаю, почему сегодня что-то не сработало. Я просто помещаю свой код стиля в styles.js вот так:

const styleSheet = {
  mainContainer: {
  height: '100vh',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  },
  backDrop: {
    minHeight: '100vh',
  },
  // ... more styles here
};

экспортировать таблицу стилей по умолчанию;

А затем импортировал его в файл компонента React с помощью: import styleSheet from './styles.js';

Все отлично работает! Всем спасибо за вдохновение.

person robertwerner_sf    schedule 14.08.2019