Praca na reakcji projektu za pomocą webpack. Dodawanie niektórych stylów w stylu.css i importowanie do komponentu z import style from './style.css';. Elementy bez selektorów dodanych jak body, div, zdobądź w stylu w stylu, ale biegam w kwestiach z klasami.

Ustawianie nazwy klasy z <div className='foo'>foo div</div>.

Css:

.foo {
  height: 250px;
  width: 250px;
  background-color: blue !important;
}

body {
  background-color: red;
}

Czerwony kolor tła zostaje zastosowany do ciała, ale .foo Div dostaje nic ... kiedy sprawdziłem foo DIV w DevTools ma swoją nazwę klasy (<div class="foo">foo div</div>) i arkusz stylów jest nienaruszony:

.foo {
  height: 250px;
  width: 250px;
  background-color: blue !important;
}

body {
  background-color: red;
}

Próbowałem to rozgryźć na chwilę i próbowałem wiele rzeczy ... zasadniczo wszystkie elementy DOM mogą być stylizowane, ale jak tylko spróbuję dodać każdy selektor, nic nie dostaję ...

8
robbieyng 28 czerwiec 2017, 00:09

4 odpowiedzi

Najlepsza odpowiedź

Twoja konfiguracja WebPack może zmieniać nazwę klasy w zależności od ustawień. (Moduły CSS włączone, choć komentarz o arkuszu stylów nienaruszone oznacza, że nie jest).

Ponieważ importujesz plik "./style.css", spróbuj odwoływać się do nazwy klasy, takiej jak styl. Dawny:

<div className={ style.foo }>foo div</div>

W tym artykule: http://javascriptPlay.com/Blog/2016/07 / CSS-Modules-WebPack-React / opisuje wzór importu i odwoływania się do nazwy klasy całkiem dobrze.

10
Kyle Swanson 27 czerwiec 2017, 22:08

Moim rozwiązaniem jest zmienienie nazwy pliku CSS z:

style.css

Do:

style.module.css
0
Itay Tur 10 luty 2019, 09:45

Podczas gdy odpowiedź Kyle działa, lepszym rozwiązaniem będzie zmienić nazwę pliku CSS jako style.global.css i zaimportuj go za pomocą import './style.global.css' i określ nazwę klasy jak normalny HTML. Działa to lepiej, gdy chcesz dołączyć różne nazwy klas w czasie wykonywania

<div className='foo'>foo div</div>
2
Abdelrhman Elmahdy 21 listopad 2019, 00:12

Jeśli jesteś taki jak ja i użyj atrybutu stylu do stylizacji, a następnie przenieś je do odpowiednich klas w plikach .css (i zastanawiam się, dlaczego nie działa), pamiętaj, aby usunąć format łańcucha JSX,

height: "100px"

To nie to samo co

height: 100px
4
Bhargav Rao 10 luty 2019, 10:08