Javascript在外部文件中的Javascript中反应JS css

我正在使用reactjs，试图在javascript中获得css，并最终从外部js文件读取css

代码如下：

import React from 'react';
import ReactDOM from 'react-dom';

var styles = {
  container: {
    padding: 20,
    border: '5px solid green',
    borderRadius: 2
  }
};

var myComponent = React.createClass({
  render: function() {
    return (
      <div style={styles.container}>
        {this.props.name}
      </div>
    );
  }
});

我将此导入与其他导入一起添加到页面顶部

问题是它没有阅读风格

---

我做错了什么？

创建一个新文件并将此代码放入其中

export const style = { container : { 
  padding: 20,
  border: '5px solid green', 
  borderRadius: 2 } 
};

现在在您的组件文件中

import * as styles from './style/location/filename'

现在可以在渲染函数中使用样式

return (
    <div style={styles.style.main}>
      <h3 style={styles.style.header}>Vote for your favorite hack day idea</h3>
    </div>
  );

返回(
投票支持你最喜欢的黑客日创意
);

您可以直接在js中导入css文件

import./style/app.css'

app.css

.page{
背景色：#fafafa；
}

您可以在React组件中使用这个类，如下所示


希望它能起作用
 有一个小工具可以自动将CSS转换为JSON表示

值得一看

注意翻译如何添加uu下划线：

div.redcolor { color:red; }
div:hover { color:blue; }

进入：

注意Vishwas Chauhan如何使用ES6进出口的星号法：


如果你使用这个工具，你会得到一个大对象，你可以使用任何方法。
但我想这样做：var styles={container:{padding:20，border:'5px solid green'，borderRadius:2}；但是在外部文件中，您可以在react组件中使用style={styles.styles.container}吗？很好。此外，您应该为cssif提供合适的加载程序，如果您想在外部文件中使用样式，只需使
export const style={container:{padding:20，border:'5px solid green'，borderRadius:2}
然后在组件js中，从“./style/location/filename”导入*作为样式，您可以将其作为
使用。希望它能帮助你，但我想这样做：var样式={container:{padding:20，border:'5px solid green'，borderRadius:2}；但在外部file@PaulTenna2000我已经根据您的要求更新了答案。看看。你说的外部文件是什么意思？Css还是js文件？
div.redcolor { color:red; }
div:hover { color:blue; }

{"div_redcolor":{"color":"red"},"div_hover":{"color":"blue"}}