这取决于你的应用程序有多大，如果你想使用webpack这样的捆绑器，在构建中将CSS和JS捆绑在一起，以及你想如何管理你的应用程序流!最后，取决于你的情况，你可以做出决定!

在大型项目中，我对组织文件的偏好是将CSS和JS文件分开，这可能更容易共享，更容易让UI人员浏览CSS文件，也更整洁地组织整个应用程序的文件!

始终以这种方式思考，确保在开发阶段所有东西都在它们应该在的地方，正确命名，并且易于其他开发人员找到……

我个人会根据自己的需要来混合它们，比如…… 尝试使用外部css，但如果需要React也会接受style，你需要将它作为一个带有key value的对象传递，如下所示:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

有时候，我们需要从组件中样式化一些元素，但如果我们必须只显示该组件的一个元素，或者样式是如此之少，那么我们不使用CSS类，而是在react js中使用内联样式。reactjs的内联样式和HTML的内联样式是一样的，只是属性名略有不同

使用style={{prop:"value"}}在任何标签中写入样式

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

你也可以使用StrCSS，它可以创建独立的类名等等!示例代码如下所示。你可以(可选)从Visual Studio市场安装VSCode扩展来支持语法高亮显示!

来源:strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

对于某些组件，使用内联样式更容易。此外，我发现它更容易和更简洁(因为我使用Javascript而不是CSS)动画组件样式。

对于独立组件，我使用“扩展操作符”或“…”。对我来说，它清晰、美丽，在狭小的空间里也能工作。下面是我制作的一个加载动画来展示它的好处:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

2019年11月

在这个行业(一家财富500强公司)工作，我不允许做任何内联样式。在我们的团队中，我们认为内联样式是不可读和不可维护的。而且，在亲眼看到内联样式如何使支持应用程序变得完全无法忍受之后，我不得不同意这一点。我完全反对内联样式。

style属性的主要用途是动态的、基于状态的样式。例如，您可以在进度条上基于某种状态设置宽度样式，或者基于其他内容设置位置或可见性。

JS中的样式限制了应用程序不能为可重用组件提供自定义样式。在前面提到的情况下，这是完全可以接受的，但当您更改可见特征时，尤其是颜色。

你可以使用内联样式，但你会有一些限制，如果你在所有的样式中使用它们，一些已知的限制是你不能在那里使用CSS伪选择器和媒体查询。

你可以用镭来解决这个问题，但我觉得随着项目的发展，它会变得很麻烦。

我建议使用CSS模块。

使用CSS模块，你将有在CSS文件中写CSS的自由，不必担心命名冲突，这将由CSS模块照顾。

这种方法的一个优点是，它为特定组件提供了样式化功能。这将为下一个开发人员创建更易于维护的代码和可读的项目架构。