我知道你可以在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文件中指定的样式吗?
或者我应该完全避免内联样式?
这似乎有点奇怪和混乱做一点两者-两个地方需要检查时调整样式。
当前回答
TLDR -使用css在js解决方案(如情感或样式组件)，享受最好的css和js所提供的
在css或scss文件中，很难管理动态样式。在内联样式标签中，不能使用媒体查询或伪选择器。
在JS中使用CSS，你可以享受两全其美。JS中的Css之于Css有点像React之于HTML。它允许在JS代码中以对象或字符串的形式编写css，并享受javascript生态系统的强大功能和工具。
到目前为止，js库中有一些受欢迎的、得到良好支持的CSS，包括Emotion、styles - components和镭。
让我们比较一下样式化简单元素时代码的样子。我们将设置“hello world”div的样式，这样它在桌面上显示大，在移动端显示小。
使用style属性
return (
<div style={{fontSize:24}} className="hello-world">
Hello world
</div>
)
由于媒体查询在样式标签中是不可能的，我们必须向元素中添加一个className并添加一个css规则。
@media screen and (max-width: 700px){
.hello-world {
font-size: 16px;
}
}
使用Emotion的10 CSS标签
return (
<div
css={{
fontSize: 24,
[CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
fontSize: 16
}
}
>
Hello world
</div>
)
Emotion还支持模板字符串和样式化组件。所以如果你喜欢，你可以这样写:
return (
<Box>
Hello world
</Box>
)
const Box = styled.div`
font-size: 24px;
${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
font-size: 16px;
}
`
“JS中的CSS”背后使用的是CSS类。
最佳实践
以下是我推荐的一些最佳实践:
在JS中使用CSS解决方案 在JS中构造样式代码与构造一般的代码非常相似。例如:
识别重复的样式，并将它们写在一个地方。在Emotion中有两种方法:
// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
BUTTON: css`
background-color: blue;
color: white;
:hover {
background-color: dark-blue;
}
`
}
// SomeButton.js
const SomeButton = (props) => {
...
return (
<button
css={COMMON_STYLES.BUTTON}
...
>
Click Me
</button>
)
}
// Option 2 - Write your common styles in a dedicated component
const Button = styled.button`
background-color: blue;
color: white;
:hover {
background-color: dark-blue;
}
`
const SomeButton = (props) => {
...
return (
<Button ...>
Click me
</Button>
)
}
React编码模式是封装组件- HTML和JS，控制组件被写在一个文件中。这是你的css/样式代码样式的组件属于。 必要时，为组件添加样式道具。通过这种方式，您可以重用在子组件中编写的代码和样式，并通过父组件对其进行定制以满足您的特定需求。
const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])
const SmallButton = (props)=>(
<Button
...
stl={css`font-size: 12px`}
>
Click me if you can see me
</Button>
)
const BigButton = (props) => (
<Button
...
stl={css`font-size: 30px;`}
>
Click me
</Button>
)
其他回答
TLDR -使用css在js解决方案(如情感或样式组件)，享受最好的css和js所提供的
在css或scss文件中，很难管理动态样式。在内联样式标签中，不能使用媒体查询或伪选择器。
在JS中使用CSS，你可以享受两全其美。JS中的Css之于Css有点像React之于HTML。它允许在JS代码中以对象或字符串的形式编写css，并享受javascript生态系统的强大功能和工具。
到目前为止，js库中有一些受欢迎的、得到良好支持的CSS，包括Emotion、styles - components和镭。
让我们比较一下样式化简单元素时代码的样子。我们将设置“hello world”div的样式，这样它在桌面上显示大，在移动端显示小。
使用style属性
return (
<div style={{fontSize:24}} className="hello-world">
Hello world
</div>
)
由于媒体查询在样式标签中是不可能的，我们必须向元素中添加一个className并添加一个css规则。
@media screen and (max-width: 700px){
.hello-world {
font-size: 16px;
}
}
使用Emotion的10 CSS标签
return (
<div
css={{
fontSize: 24,
[CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
fontSize: 16
}
}
>
Hello world
</div>
)
Emotion还支持模板字符串和样式化组件。所以如果你喜欢，你可以这样写:
return (
<Box>
Hello world
</Box>
)
const Box = styled.div`
font-size: 24px;
${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
font-size: 16px;
}
`
“JS中的CSS”背后使用的是CSS类。
最佳实践
以下是我推荐的一些最佳实践:
在JS中使用CSS解决方案 在JS中构造样式代码与构造一般的代码非常相似。例如:
识别重复的样式，并将它们写在一个地方。在Emotion中有两种方法:
// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
BUTTON: css`
background-color: blue;
color: white;
:hover {
background-color: dark-blue;
}
`
}
// SomeButton.js
const SomeButton = (props) => {
...
return (
<button
css={COMMON_STYLES.BUTTON}
...
>
Click Me
</button>
)
}
// Option 2 - Write your common styles in a dedicated component
const Button = styled.button`
background-color: blue;
color: white;
:hover {
background-color: dark-blue;
}
`
const SomeButton = (props) => {
...
return (
<Button ...>
Click me
</Button>
)
}
React编码模式是封装组件- HTML和JS，控制组件被写在一个文件中。这是你的css/样式代码样式的组件属于。 必要时，为组件添加样式道具。通过这种方式，您可以重用在子组件中编写的代码和样式，并通过父组件对其进行定制以满足您的特定需求。
const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])
const SmallButton = (props)=>(
<Button
...
stl={css`font-size: 12px`}
>
Click me if you can see me
</Button>
)
const BigButton = (props) => (
<Button
...
stl={css`font-size: 30px;`}
>
Click me
</Button>
)
style属性的主要用途是动态的、基于状态的样式。例如，您可以在进度条上基于某种状态设置宽度样式，或者基于其他内容设置位置或可见性。
JS中的样式限制了应用程序不能为可重用组件提供自定义样式。在前面提到的情况下，这是完全可以接受的，但当您更改可见特征时，尤其是颜色。
我在React组件中广泛使用内联样式。我发现在组件中搭配样式非常清楚，因为组件有什么样式，没有什么样式总是很清楚的。此外，拥有Javascript的全部功能确实简化了更复杂的样式需求。
一开始我并不相信，但在尝试了几个月后，我完全转换了，并且正在将我所有的CSS转换为内联或其他js驱动的CSS方法。
Facebook员工和React贡献者“vjeux”的演示也很有帮助- https://speakerdeck.com/vjeux/react-css-in-js
你也可以使用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强公司)工作，我不允许做任何内联样式。在我们的团队中，我们认为内联样式是不可读和不可维护的。而且，在亲眼看到内联样式如何使支持应用程序变得完全无法忍受之后，我不得不同意这一点。我完全反对内联样式。
