Import styles css into a react js app

Question

i have a trouble importing .css stylesheet on a react basic app, I have this components:

AvatarHeader.js:

import styles from './AvatarHeader.css';

export default function AvatarHeader({ style, children }) {
  return (
    <div>
      <img style={styles.image} src={Background} alt="background">
        { children }
      </img>

AvatarHeader.css:

.image {
   width: 400
}

AvatarHeader.js & AvatarHeader.css are in the same folder.

package.json:

  {
    "name": "UtWeb",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
      "css-loader": "^0.25.0",
      "react-scripts": "0.9.0",
      "webpack": "^2.2.1",
      "webpack-dev-server": "^1.9.0"
    },
    "dependencies": {
      "react": "^15.4.2",
      "react-dom": "^15.4.2",
      "react-redux": "^4.3.0",
      "react-router": "^2.0.0",
      "redux": "^3.2.1",
      "react-router-redux": "^4.0.0"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
  }

Styles aren't applied on the component, but it's works if I rewrite AvatarHeader.js so:

  import styles from './AvatarHeader.css';

  const image = {
    width: 400
  }

  export default function AvatarHeader({ style, children }) {
    return (
      <div>
        <img style={image} src={Background} alt="background">
          { children }
        </img>

I don't understand how to fix this bug for use the first way to import css file.

You don't import the CSS file and use it like an object. You just have to import the file with no name just for side effects and then give the .image class to the img. — Andrew Li
– Andrew Li, Commented Mar 1, 2017 at 22:27
You may try to use css-object-loader instead of css-loader, since it will give you an object instead of loading the CSS globally (which is what css-loader does). — Freyja
– Freyja, Commented Mar 1, 2017 at 22:31

paqash · Accepted Answer · 2017-03-01 22:32:31Z

9

import './AvatarHeader.css';`
<img className='image' />`

is the correct syntax

answered Mar 1, 2017 at 22:32

paqash

2,3141 gold badge20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sebastian Gulino Over a year ago

Perfect! This works, but another question what pass if I have another imported css file with a 'image' class. How can i define where to use the class?

paqash Over a year ago

If you're using webpack and css-loader, you can define scope. More info here: github.com/webpack-contrib/css-loader#css-scope

stackdave Over a year ago

this import css globally? or just for the component ?

kohrVid · Accepted Answer · 2021-01-11 08:31:41Z

2

In case anyone runs into this problem again, the stylesheet needs to follow the module naming convention for the OP's original syntax to work.

So once the file is renamed AvatarHeader.module.css, the following React code should work:

import styles from './AvatarHeader.module.css';

export default function AvatarHeader({ style, children }) {
  return (
    <div>
      <img style={styles.image} src={Background} alt="background">
        { children }
      </img>

answered Jan 11, 2021 at 8:31

kohrVid

532 silver badges5 bronze badges

Comments

Nasir · Accepted Answer · 2021-04-24 02:38:47Z

2

You need to change the CSS file name from AvatarHeader.css to AvatoarHeader.module.css. then the import statement should be: import styles from './AvatarHeader.module.css'. It should work now. see docs

answered Apr 24, 2021 at 2:38

Nasir

311 bronze badge

Collectives™ on Stack Overflow

Import styles css into a react js app

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related