我知道你可以在React类中指定样式,像这样:

const MyDiv = React.createClass({
  render: function() {
    const style = {
      color: 'white',
      fontSize: 200
    };
    
    return <div style={style}> Have a good and productive day! </div>;
  }
});

我应该瞄准这样做的所有样式,并没有在我的CSS文件中指定的样式吗?

或者我应该完全避免内联样式?

这似乎有点奇怪和混乱做一点两者-两个地方需要检查时调整样式。


当前回答

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

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

其他回答

James K Nelson在他的信“为什么你不应该用JavaScript样式化React组件”中指出,实际上没有必要使用内联样式及其缺点。他的观点是,旧的无趣的CSS加上较少的/scss是最好的解决方案。他的论文中支持CSS的部分:

可扩展的外部 可分割(内联样式超越一切) define_image_transformation

我所做的是为每个可重用组件提供一个唯一的自定义元素名称,然后为该组件创建一个CSS文件,特别是包含该组件的所有样式选项(并且仅针对该组件)。

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

在文件'custom-component.css'中,每个条目都以custom-component标签开始:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

这意味着你不会失去关注点分离的关键概念。视图与样式。如果你共享你的组件,其他人更容易将其主题化以匹配他们网页的其余部分。

无论如何,内联css是不推荐的。我们在基于JSS的项目中使用了样式组件。它通过在组件上添加动态类名来保护css覆盖。您还可以根据传递的道具添加css值。

你也可以使用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>;
  }
}

下面是JSX语法中基于布尔的样式:

style={{display: this.state.isShowing ? "inherit" : "none"}}