javascript - Javascript - 在JSX文件中导入CSS

我试图将css样式导入js文件中,但是,无法正确使用样式,

在我的文件Graph.js中:


import React from 'react';


import styles from './Graph.css';


import Center from './Center/Center'



class Graph extends React.Component {



 render(){


 return(


 <div className={styles.graph}>


 <Center>test</Center>


 </div>


 );


 }


}



export default Graph;



我尝试使用文件Graph.css中的样式,它外观如下所示:


.graph {


 height: 500px;


 width: 500px;


 border: 1px solid grey;


}



是否有可能以这种方式管理导入样式到组件?

时间:

你的导入语句应该是import'./Graph.css';,并且在组件<div className="graph">

你可能混淆了React和react-native

在React中,不需要styles.graph 。

而在正常的.html文件中执行它的方式会起作用


import React from 'react';


import styles from './Graph.css';


import Center from './Center/Center'



class Graph extends React.Component {



render(){


 return(


 <div className="graph"


 <Center>test</Center>


 </div>


 );


 }


}



export default Graph;



你在web pack配置中缺少一个重要的css规则选项。


{


 loader: 'css-loader',


 options: {


 modules: true,


 camelCase: true


 }


}



添加此选项对象以导入样式。模块选项允许你使用CSS作为样式对象,camelCase选项允许使用some class作为someClass 。

希望这会帮助。

...