Javascript reactJs CSS在外部文件中的JavaScript中

Question

我正在使用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>
    );
  }
});

這工作正常，但我需要做的是將css放在外部文件中。 所以我創建了一個名為general.css.js的文件

我嘗試導入它：

import styles from './components/general.css';

我將此導入與其他導入一起添加到頁面頂部。

問題在於它沒有閱讀樣式。

我在這里做錯了什么？

Answer 1

制作一個新文件，並將此代碼放入其中。

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>
  );

Answer 2

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

import './style/app.css';

app.css

.page { background-color:#fafafa; }

您可以在React組件中使用此類，如下所示。

<div className="page">

希望它能工作！！！！

Answer 3

有一個小工具可以自動將CSS轉換為JSON表示形式。

值得一檢查說出來。

注意翻譯如何添加_下划線：

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

成：

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

請注意，Vishwas Chauhan如何使用ES6導入導出的加星標方法：

如果您使用此工具，則會得到一個大對象，並且可以使用任何方法。