Sebastian Gulino Sebastian Gulino -4 years ago 276
CSS Question

Import styles css into a react js app

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.

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

is the correct syntax

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download