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

<p>в настоящее время я использую css-модули с react для моего стиля. таким образом, каждый из моих компонентов импортируется в свой css-файл для конкретного компонента, например так:</p><pre><code>import react from 'react'; import styles from './app.css'; const example = () => ( <div classname={styles.content}> hello world! </div> ); export default example; </code></pre><p>это прекрасно работает при стилизации отдельных компонентов, но как применить глобальные стили (html, body, теги заголовков, div и т.д.), которые не зависят от конкретного компонента? </p>

<p>поскольку вы используете синтаксис импорта es6, вы можете использовать тот же синтаксис для импорта таблицы стилей.</p><pre><code>import './app.css' </code></pre><p>кроме того, вы можете обернуть свой класс с помощью <code>:global</code>, чтобы переключиться на глобальную область (это означает, что модуль css не будет модулировать его, например, добавив случайный идентификатор рядом с ним)</p><pre><code>:global(.myclass) { background-color: red; } </code></pre>

<p>это можно сделать, просто добавив:</p><pre><code>require('./app.css'); </code></pre><p>(спасибо @elmeister, который правильно ответил на этот вопрос.)</p>

<p>единственный способ, который я нашел для импорта стилей глобально, но только для определенного маршрута, - это добавить:</p><pre><code><style dangerouslysetinnerhtml={{\_\_html: ` body { max-width: 100% } `}} /> </code></pre><p>внутри возврата метода <code>render</code>.</p><p>в противном случае тег <code>style</code> будет добавлен к <code><head></code>, а стили будут применены ко всем следующим маршрутам.</p><p>от <a href="https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974">https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974</a> </p><p>возможно, стили могут быть импортированы в виде строки из файла, чтобы код был более организованным.</p>