[英]Import styles css into a react js app
我在 React 基本应用程序上导入 .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>
头像头文件.css:
.image {
width: 400
}
AvatarHeader.js 和 AvatarHeader.css 位于同一文件夹中。
包.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 文件的方法。
import './AvatarHeader.css';`
<img className='image' />`
是正确的语法
万一有人再次遇到这个问题,样式表需要遵循模块命名约定才能使 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>
您需要将 CSS 文件名从AvatarHeader.css
为AvatoarHeader.module.css
。 那么导入语句应该是: import styles from './AvatarHeader.module.css'
。 它现在应该可以工作了。 查看文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.