Как применить css к указанному c компоненту?

Question

Как применить css к указанному c компоненту?

Например: в приложении. js, я включил Вход, Зарегистрировать компоненты для маршрутов.

В входе . css Я добавил css и импортировал при входе в систему. js.

Теперь css, которые импортируются в компоненте входа, также применяются в компоненте Регистрация.

Как решить эту проблему?

Answer 1

У вас все отлично, так как вы сказали, что импортировали компоненты Login и Register в App root React функциональный компонент.

Это была проблема, когда я застрял до двух месяцев go, когда я начал использовать CSS в компонентах React.

Использование CSS Modules отличается от одной версии к различным версиям React.

Если вы загрузились ваш проект с creat-react-app version >= V2, вам просто нужно использовать CSS Modules , и он будет работать как шарм. Пожалуйста, следуйте инструкциям и установке.

Answer 2

Существует множество способов применения стилей к вашему компоненту.

1. вы можете иметь несколько css файлов, таких как логин. css, и для этого есть определенные c классы этого file.

2. имен классов в index.css и использовать эти классы в необходимых местах, это будет очень полезно, если у вас много компонентов, и вы будете sh делать свое приложение выглядит одинаково на всех страницах.

3. Если вы не используете повторно стили, нет смысла создавать файл css и импортировать его. Просто объявите styleConst, который является объектом стилей, и вы можете напрямую использовать его как <div style={styleConst} />

Answer 3

в конфигурации вашего веб-пакета

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: 'css-loader',
        options: {
          modules: {
            localIdentName: '[local]___[hash:base64:5]',
          },
        },
      },
    ],
  },
};