我知道你可以在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文件中指定的样式吗?

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

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


当前回答

React中的style属性期望值是一个对象,即键值对。

Style ={}将在其中包含另一个对象,如{float:'right'},以使其工作。

<span style={{float:'right'}}>Download Audit</span>

希望这能解决问题

其他回答

JSX中的样式与HTML中的样式非常相似。

HTML的例子:

Div style="background-color: red;颜色:白色”

JSX案例:

div style={{backgroundColor: '红色',color: '白色'}}

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

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

根据您的配置,内联样式可以为您提供热重载。每次样式改变时,网页都会立即重新呈现。这有助于我更快地开发组件。话虽如此,我相信你可以为CSS + SCSS设置一个热重载环境。

React中的style属性期望值是一个对象,即键值对。

Style ={}将在其中包含另一个对象,如{float:'right'},以使其工作。

<span style={{float:'right'}}>Download Audit</span>

希望这能解决问题

我通常有与每个React组件相关联的scss文件。但是,我不明白为什么你不封装组件与逻辑,并查看它。我的意思是,你有类似的web组件。