Стили класса Class не работают в реакции

У меня небольшая проблема с компоновкой элементов оформления. У меня есть таблицы стилей scss в отдельном файле и импортирование их в файл ответов. Мой scss-стиль выглядит следующим образом:

.testStyle {
  font-family: avenir;
  color: blue;
}

Мой файл реакции выглядит следующим образом:

import React from 'react'

import styles from '../styles/main.scss'

class Temp extends React.Component {
  render() {
    return (
      **<div className={styles.testStyle}>**
        <h1>Hello</h1>
      </div>
    )
  }
}

export default Temp

С помощью этой настройки мои стили не пройдены, однако, если она работает, если я заменю выделенную строку на <div className='testStyle'>, так что кажется, что стили импортируются правильно. Может кто-нибудь помочь с этим? Спасибо.

Ответы

Ответ 1

Я полагаю, вы используете загрузчик CSS в своем веб-пакете. Вам необходимо включить модули: true

{
  loader: 'css-loader',
  options: { 
    modules: true
  }
}

Если вы не хотите, чтобы это поведение было по умолчанию, в вашем (-их) CSS вы можете использовать:

// sCSS
:local .yourClass {...}

// JS

import cls from '../yourCss.scss'

const Component = () => (
  <div className={cls.yourClass} />
)

// yourClass will become some random hash
// or something else based on your css loader config

чтобы его обработали. Если у вас есть модули: true и вы не хотите, чтобы css loader компилировал ваш класс, вы можете использовать

// CSS
:global .yourGlobalClass {...}

// JS
import '../yourCss.scss'

const Component = () => (
  <div className="yourGlobalClass" />
)

См. Документацию: https://github.com/webpack-contrib/css-loader и https://github.com/css-modules/css-modules.

Ответ 2

Импорт таблицы стилей просто скажет Webpack или другим инструментам сборки обрабатывать эту таблицу стилей и включать ее в выходные файлы. Он, насколько мне известно, не позволяет вам использовать шаблон JSX. Таким образом, просто импортируя его, ваши стили будут доступны после цикла сборки. Вам не нужно использовать его каким-либо образом.

className берет строку и непосредственно переводит на html class - поэтому используйте ее так.

Ответ 3

Возможно, в вашей конфигурации веб-пакета отсутствует загрузчик sass. Для этого, пожалуйста, проверьте здесь,

Я рекомендую отказаться от sass и использовать postcss, он обширный и работает так, как вы используете классы в коде выше.

Для установки и настройки postcss проверьте здесь

Ответ 4

enter image description hereit very simple, just run command "npm run eject" It moves create-react-apps configuration files and dev/build/test scripts into you app directory.

now go to config folder and open 'webPackConfig.js' file and add the following code

          use: getStyleLoaders({
              ....
              ....
            modules:true,
            getLocalIdent:getCSSModuleLocalIdent,
            localIdentName: '[name]_[local]_[hash:base64:5]'
          })
example:

import React from 'xyz';
import Logo from './Logo/Logo';

import classes from './Toolbar.css';
import NavigationItems from './NavigationItems';
import DrawerToggle from './DrawerToggle/DrawerToggle';

const toolbar = (props) => (
    <header className={classes.Toolbar}>
        <DrawerToggle clicked={props.DrawerToggleClicked}/>
        <div className={classes.Logo}>
            <Logo />
        </div>
    <nav className={classes.DesktopOnly}>
        <NavigationItems />
    </nav>
    </header>
);
export default toolbar;
try this and you can definitely solve your issue

Ответ 5

/* loginScreen.js */

import React, { Component } from 'react';
import './styles.css'

class loginScreen extends Component {
  render() {
    return (
      <div className={ 'form' }>

      </div>
    );
  }
}

export default loginScreen;

Ответ 6

Попробуйте переименовать расширение имени файла .scss в .module.scss

Если есть проблема в sass-loader или вы не настроили его для поддержки файлов .scss - его оригинальный формат scss будет поддерживать только расширение .module.scss.

У меня была та же проблема, и она исправила мою проблему.

Вы также можете проверить здесь вопрос, который я задавал.

Ответ 7

Я полагаю, это может быть связано с тем, что некоторые конфиги Webpack "хешируют" классы, поэтому ваш код должен выглядеть примерно так:

import React from 'react'

import * as  styles from '../styles/main.scss'

const selectors = styles as any;

class Temp extends React.Component {
  render() {
    return (
      **<div className={selectors.testStyle}>**
        <h1>Hello</h1>
      </div>
    )
  }
}

Посмотрите, поможет ли это.