Импорт css в реакцию js - PullRequest
Новая
       36

Импорт css в реакцию js

0 голосов
/ 12 марта 2020

Я пытаюсь импортировать стили из файла. css в реагирующий файл js, используя команду "import" ../css/banner.css ', с установленными css -loader и style-loader и включен. Это должен быть самый прямой и простой способ импортировать css в реакции, но стили просто не будут применяться.

Я пытаюсь добиться этого без использования других библиотек, таких как styled-component или jss.


баннеры. css: 

.headerItem{
  width: 20vw;
  float: left;
  background-color: cadetblue;
  margin: auto;
  padding: 3em;
  text-align: center;
}

Заголовок. js

import React ...
import '../css/banners.css'

class Header extends React.Component{
  constructor(){
  }

  render(){
    return (
      <div className={"header"}>
        <HeaderItem/> //shown as an example, has className of "headerItem"
      </div>
    )
  }
}

Ответы [ 4 ]

3 голосов
/ 12 марта 2020

Проблема не имеет отношения к наложению фигурных скобок на имя класса или нет. Я обнаружил, что в моем webpack.config.js я установил параметр modules в "css -loader" равным true, что привело к тому, что css-loader ищет modules.css файлы вместо .css файлов , Изменение параметра modules на false решило мою проблему. (Если вы используете модули css, не забудьте установить флаг в правильное значение!)

Фактически, аргументы, передаваемые компоненту React, всегда должны быть заключены в фигурные скобки, и даже если вы этого не сделаете, компилятор автоматически добавит их для вас, поскольку каждый аргумент обрабатывается как объект, который затем будет собран и передан как подпорка дочернему компоненту.

Извинения за поднятие такого тривиального и неправильно сфокусированный вопрос.

1 голос
/ 12 марта 2020

Попробуйте это. Не используйте {} в className

<div className="headerItem">
  <SomeChild/> //shown as an example
</div>
0 голосов
/ 12 марта 2020

Лучший и самый простой способ включить CS в ваш реактивный проект:

  1. переименовать ваш файл в [FileName].module.css
  2. импортировать его в ваш проект, используя import importedStyles from './[FileName].module.css
  3. используйте его, вызвав импортированное имя. стиль css, который вы хотите использовать. например, importedStyles.bodyStyle

переименование баннеров. css в banner.module. css: 

.headerItem{
  width: 20vw;
  float: left;
  background-color: cadetblue;
  margin: auto;
  padding: 3em;
  text-align: center;
}
Header.js

Позвоните на css файл в ваш проект и использовать; 

import React ...
import bannerStyles '../css/banners.module.css'

class Header extends React.Component{
  constructor(){
  }

  render(){
    return (
      <div className={"bannerStyles.header"}>
        <HeaderItem/> //shown as an example, has className of "headerItem"
      </div>
    )
  }
}

Это должно работать нормально и просто.

Ссылка: https://www.w3schools.com/react/react_css.asp

Дайте мне знать, если это работает!

0 голосов
/ 12 марта 2020

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

...