我在反应基础应用上导入.css样式表时遇到问题,我有这些组件:
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&amp; AvatarHeader.css位于同一文件夹中。
的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"
}
}
样式不会应用于组件,但是如果我重写AvatarHeader.js就可以了:
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>
我不明白如何使用导入css文件的第一种方法修复此错误。
答案 0 :(得分:4)
import './AvatarHeader.css';`
<img className='image' />`
是正确的语法
答案 1 :(得分:0)
万一有人再次遇到这个问题,样式表需要遵循 module naming convention 才能使 OP 的原始语法正常工作。
所以一旦文件被重命名为 AvatarHeader.module.css
,下面的 React 代码应该可以工作:
import styles from './AvatarHeader.module.css';
export default function AvatarHeader({ style, children }) {
return (
<div>
<img style={styles.image} src={Background} alt="background">
{ children }
</img>
答案 2 :(得分:-1)
您需要将 CSS 文件名从 AvatarHeader.css
更改为 AvatoarHeader.module.css
。
那么导入语句应该是:
import styles from './AvatarHeader.module.css'
。它现在应该可以工作了。
see docs