我知道你可以在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文件中指定的样式吗?
或者我应该完全避免内联样式?
这似乎有点奇怪和混乱做一点两者-两个地方需要检查时调整样式。
当前回答
我所做的是为每个可重用组件提供一个唯一的自定义元素名称，然后为该组件创建一个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;
}
这意味着你不会失去关注点分离的关键概念。视图与样式。如果你共享你的组件，其他人更容易将其主题化以匹配他们网页的其余部分。
其他回答
React中的style属性期望值是一个对象，即键值对。
Style ={}将在其中包含另一个对象，如{float:'right'}，以使其工作。
<span style={{float:'right'}}>Download Audit</span>
希望这能解决问题
我所做的是为每个可重用组件提供一个唯一的自定义元素名称，然后为该组件创建一个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;
}
这意味着你不会失去关注点分离的关键概念。视图与样式。如果你共享你的组件，其他人更容易将其主题化以匹配他们网页的其余部分。
下面是JSX语法中基于布尔的样式:
style={{display: this.state.isShowing ? "inherit" : "none"}}
根据您的配置，内联样式可以为您提供热重载。每次样式改变时，网页都会立即重新呈现。这有助于我更快地开发组件。话虽如此，我相信你可以为CSS + SCSS设置一个热重载环境。
你也可以使用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>;
}
}
