Class styles do not work in reaction

Question

I have a little problem with layout elements. I have scss style sheets in a separate file and importing them into an answer file. My scss style is as follows:

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

My reaction file is as follows:

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

With this setting, my styles are not passed, however, if it works, if I replace the selected line with <div className='testStyle'>, so it seems that the styles are imported correctly. Can anyone help with this? Thank.

Answer 1

I suppose you use the CSS loader in your web package. You need to enable modules: 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.

Answer 2

Webpack . , , JSX. , , . - .

className html class - .

Answer 3

, - sass. , , ,

sass postcss, , .

postcss

Answer 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

Answer 5

/* loginScreen.js */

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

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

      </div>
    );
  }
}

export default loginScreen;

Answer 6

.scss .module.scss

sass-loader .scss - scss .module.scss.

, .

, .

Answer 7

I suppose this may be due to the fact that some Webpack configs "hash" classes, so your code should look something like this:

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>
    )
  }
}

See if that helps.