CODEWITHSUNDEEP
javascriptreactjssass
Pmmoks
Pmmoks

Reputation: 285

ClassName styles not working in react

I'm having a little issue with styling react components. I have my scss stylesheets in a separate file and importing them into my react file. My scss stylsheet looks like this:

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

My react file, looks like this:

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 setup, my styles are not passed through, however, if it works if I replace the starred line with <div className='testStyle'>, so it seems like the styles are being imported correctly. Can anyone help with this? Thanks.

Upvotes: 25

Views: 77019

Answers (7)

Ragab Mohamad
Ragab Mohamad

Reputation: 708

Some of Steps will Solve your Problem

  1. The Name Of File Must Be : FileName.module.css

enter image description here

enter image description here

  1. Import File in App.js

enter image description here

  1. Used it in Component

enter image description here

  1. Browser

enter image description here

Upvotes: 4

freetrade7
freetrade7

Reputation: 1

try this:

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

Upvotes: -1

YanivGK
YanivGK

Reputation: 913

Try to rename the .scss filename extension to .module.scss

If there's a problem in the sass-loader or you didn't configure it to support .scss files - it's original scss format will support only the .module.scss extension.

I had the same problem and it fixed my issue.

You can also check here the question I've asked of it.

Upvotes: 9

anson
anson

Reputation: 1482

/* loginScreen.js */

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

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

      </div>
    );
  }
}

export default loginScreen;

Upvotes: 2

Roman Nguyen
Roman Nguyen

Reputation: 171

I assume you are using css loader in your webpack. You need to enable modules:true

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

If you don't want this behaviour to be default, in your (s)css you can use:

// 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

to have it processed. If you have modules: true and you don't want css loader to compile your class, you can use

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

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

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

See the documentation: https://github.com/webpack-contrib/css-loader and https://github.com/css-modules/css-modules

Upvotes: 17

Muhammad Adeel
Muhammad Adeel

Reputation: 2884

You might have the sass-loader missing in your webpack configuration. For that please check here,

My recommendation is to drop sass and use postcss, it's extensive and works the way your are using classes in your code above.

For a postcss install and config check here

Upvotes: 1

erik-sn
erik-sn

Reputation: 2600

Importing a stylesheet will simply tell Webpack or other build tools to process that stylesheet and include it in the output files. It does not, as far as I know, allow you to template JSX with it. So just by importing it your styles will be available after a build cycle takes place. You don't need to actually use it in any way.

className takes a string and directly translates to html class - so use it like that.

Upvotes: 2

Related Questions