Стиль дочерних компонентов динамически реагирует

Question

Я использую sass для стилизации своих компонентов, импортируя скомпилированные CSS для каждого компонента, это не будет динамически стилизоваться или масштабироваться хорошо

Контекст:

У меня есть основная таблица стилей для основного компонента приложения, содержащая отзывчивые классы пользовательского интерфейса с медиа-запросами и различными пользовательскими размерами столбцов.Я не хочу повторять эти классы для каждого дочернего компонента основного компонента ... просто для того, чтобы каждый имел к ним доступ ... Подхожу ли я к стилю компонента, чтобы реагировать неправильно?

Как иначе, чтобы мои дочерние компоненты наследовали классы css?Должен ли я передавать их как реквизит? Мне кажется, что есть более эффективный способ решения этой проблемы ...

Как бы я поддерживал состояние глобального стиля при его динамическом изменении?

Answer 1

Я использую sass для стилизации своих компонентов, импортируя скомпилированные CSS для каждого компонента

Я бы не рекомендовал такой подход. React скомпилирован с Webpack.Если вы используете приложение create-Reaction-app для инициализации вашего нового проекта, вы можете просто импортировать любой файл .scss в ваш index.js , и Webpack скомпилирует его в .CSS файл и вставьте его в ваш HTML при сборке.Если вы делаете это таким образом, вы можете использовать любой класс css в любом месте вашего приложения React.

Больше информации здесь: https://scotch.io/tutorials/using-sass-in-create-react-app-v2

А здесь: https://create -react-app.dev / docs / добавление-s-sass-stylesheet

Ps: Я предлагаю вам создать папку scss в src с одним основным scss файлом (например, app.scss).В app.scss вы @ import все остальные scss файлы, которые могут наследовать переменные и так далее.Затем импортируйте app.scss в index.js

Answer 2

Я нашел решение, которое сработало для меня. По предложению Basile, я использую библиотеку emotion css-in-js, в которой стили входят в стилизованные компоненты.emotion поставляется с механизмом создания тем для динамического стиля CSS и поддержания глобального стиля.

Компоненты в стиле css-in-js

const MButton = styled.button`
  background-color: ${(props) => props.theme.colors.primarycolor};//using theme
  border: 3px solid $color;
  border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px 20px 20px 20px;
  -ms-border-radius: 20px 20px 20px 20px;
  -o-border-radius: 20px 20px 20px 20px;
`;
export default class index extends Component { ... your component

Для глобального моделирования и создания тем я использовал эмоцию theme, themeprovider,и глобальные компоненты.Я определяю свои темы в отдельном файле, импортирую его, применяю

const makeGlobalStyles = (theme) => css` any additional global styling not dependent on differing themes in theme`; 
//supply styles to global component which manages global theme style state
const GlobalStyles = withTheme(({ theme }) => (
  <Global styles={makeGlobalStyles(theme)} />
));

сохранить тему как состояние в главном компоненте приложения ...

this.state = {
      viewState: "DARK",
      theme: theme.DARK,//use a method to change these states to then change the theme styles used across the app

Затем предоставлю состояние темы в реальном времени для всехкомпоненты, которые его используют

render(){
const {viewState,theme} = this.state;
return(
<ThemeProvider theme={theme}>
   <GlobalStyles />
     any logic for your application, pass prop theme to components to dynamically style to the theme
     <SomeComponent theme={theme}/>
<ThemeProvider/>
)}