it-swarm.com.ru

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

В настоящее время я использую CSS-модули с React для моего стиля. Таким образом, каждый из моих компонентов импортируется в свой CSS-файл для конкретного компонента, например так:

import React from 'react';
import styles from './App.css';

const example = () => (
  <div className={styles.content}>
    Hello World!
  </div>
);

export default example;

Это прекрасно работает при стилизации отдельных компонентов, но как применить глобальные стили (html, body, теги заголовков, div и т.д.), Которые не зависят от конкретного компонента? 

29
hidace

Поскольку вы используете синтаксис импорта ES6, вы можете использовать тот же синтаксис для импорта таблицы стилей.

import './App.css'

Кроме того, вы можете обернуть свой класс с помощью :global, чтобы переключиться на глобальную область (это означает, что модуль CSS не будет модулировать его, например, добавив случайный идентификатор рядом с ним)

:global(.myclass) {
  background-color: red;
}
48
felixyadomi

Это можно сделать, просто добавив:

require('./App.css');

(спасибо @elmeister, который правильно ответил на этот вопрос.)

5
hidace

Единственный способ, который я нашел для импорта стилей глобально, но только для определенного маршрута, - это добавить:

<style dangerouslySetInnerHTML={{__html: `
  body { max-width: 100% }
`}} />

внутри возврата метода render.

В противном случае тег style будет добавлен к <head>, а стили будут применены ко всем следующим маршрутам.

От https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

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

0
Manolo