React global S CSS: стиль стилей не работает - PullRequest
Новая
       25

React global S CSS: стиль стилей не работает

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

Я использую React с SASS.

Для своих компонентов я использую модульную CSS, однако в моем файле Layout.js я хочу использовать файл main.scss.

Мой main.scss файл работает так, как когда я добавляю стиль к селекторам, таким как body {} или p {}, они стилизуют эти элементы. Это стили для классов, которые, кажется, не проходят. Например, в моем файле global.scss у меня есть следующее css

body {
  margin: 0;
}
.marginsContainer {
  width: 90%;
  margin: auto;
  padding: 100px;
}

body работает. .mainContainer не так.

Я пытаюсь использовать .mainContainer в своем файле Layout. js, например, 

import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';

const Layout = (props) => (
  <div>
    <Head>
      <title>Practise Site</title>
    </Head>
    <Navbar />
    <div className="marginsContainer">
      {props.children}
    </div>
  </div>
);

export default Layout;

В чем может быть проблема?

1 Ответ

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

Используете ли вы css -модули?

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

:global {
  .marginsContainer {
    width: 90%;
    margin: auto;
    padding: 100px;
  }
}

Лучшее решение - использовать имя класса с ha sh, импортировав таблицу стилей следующим образом. 

import styles from '../global-styles/main.scss';

И установка имени класса следующим образом. 

<div className={styles.marginsContainer}>
...