我知道你可以在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>
希望这能解决问题
其他回答
你也可以使用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>;
}
}
你可以使用内联样式，但你会有一些限制，如果你在所有的样式中使用它们，一些已知的限制是你不能在那里使用CSS伪选择器和媒体查询。
你可以用镭来解决这个问题，但我觉得随着项目的发展，它会变得很麻烦。
我建议使用CSS模块。
使用CSS模块，你将有在CSS文件中写CSS的自由，不必担心命名冲突，这将由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;
}
这意味着你不会失去关注点分离的关键概念。视图与样式。如果你共享你的组件，其他人更容易将其主题化以匹配他们网页的其余部分。
James K Nelson在他的信“为什么你不应该用JavaScript样式化React组件”中指出，实际上没有必要使用内联样式及其缺点。他的观点是，旧的无趣的CSS加上较少的/scss是最好的解决方案。他的论文中支持CSS的部分:
可扩展的外部 可分割(内联样式超越一切) define_image_transformation
有时候，我们需要从组件中样式化一些元素，但如果我们必须只显示该组件的一个元素，或者样式是如此之少，那么我们不使用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;
