介绍
React 提供了多种方法来设置组件的样式。在某些情况下，您可能希望向外部组件添加其他样式，或者为组件内的 JSX 元素分配最少的样式。使用基于组件的样式方法而不是传统的基于类的 CSS 样式变得很重要。
在本指南中，您将学习如何为 React 组件设置默认样式。
JS 中的 CSS
考虑一个简单的 React 组件，它用蓝色的文本呈现h1 。
<h1 style={{color:'blue'}}>Inline styling in React</h1>
React 中的 JSX 元素本身就是必不可少组件，默认情况下可以访问 style prop。如上所示，这用于内联样式。两对花括号是语法的一部分，表示必须为 style prop 分配一个包含键值对的对象。因此，style prop 可以从其父组件传递给任何组件。按照这种方法，可以通过传递一个包含 CSS 属性及其值作为对象内部的键值对的对象，将相同的样式设置为默认样式。
在组件顶部的h1中名为headlineStyle的对象内声明与上面相同的样式。
const headingStyle={
color:'blue'
}
注意：在 JSX 中，用连字符 ( - ) 分隔的 CSS 属性采用驼峰式命名法。
将此对象传递到 style prop 中。
<h1 style={headingStyle}>CSS in JSX React</h1>
这是在 React 中设置默认样式的一般方法。由于对象本身被分配给 style 属性，因此双花括号减少为单个。使用内联样式方法对 React 组件进行样式设计的概念也称为JS 中的 CSS，因为您直接在 JSX 模板中使用 CSS 属性。
为 React 组件设置默认样式
创建一个简单的 React 组件，渲染一个空的div。
const MyDivComponent=()=>{
return(
<>
<div/>
</>
)
}
现在创建一个样式对象divStyles，其中包含一些 CSS 规则来设置div 的样式。
const divStyles={
backgroundColor: 'teal',
padding: 10,
marginLeft: 100,
height: 400,
width:400
}
divStyles包含简单的 CSS 规则，为div提供青色背景颜色以及 400x400px 尺寸、左边距 100px 和填充 10px。
将其作为 props 传递给MyDivComponent并将其呈现在 DOM 上。
function App() {
return (
<>
<MyDivComponent style={divStyles}/>
</>
);
}
这将使用divStyles中所需的样式渲染一个div。同样，所有 CSS 规则都可以组合成一个 JavaScript 对象，然后作为 props 传递给所需的组件。
一个样式对象可用于设置不同组件的样式，或者更确切地说是组件内的不同 JSX 元素的样式。它充当该组件的 CSS 样式表，使用默认样式 prop，可以将该对象的一些 CSS 属性分配给这些元素。这与组件的样式表使用类定位不同 JSX 元素的方式非常相似。
向divStyles对象添加更多属性。
const divStyles={
backgroundColor: 'teal',
color:'white',
padding: 10,
marginLeft: 100,
height: 400,
width:400
}
现在将该对象的单独样式作为内联样式分配给 JSX 元素。
const MyDivComponent=({style})=>{
console.log(style);
return(
<>
<div style={{'backgroundColor':style.backgroundColor}}>
<h2 style={{'color':style.color}}>Default styles in a React component</h2>
</div>
</>
)
}
现在，该组件使用h2进行渲染，其背景颜色为青色，文本颜色为白色。
您还可以创建单独的样式对象并将其设置为其他组件的默认样式，类似于全局样式表。创建以下样式对象作为可导出对象。
export const headerStyles={
textTransform: 'Uppercase',
fontSize: 32,
fontWeight:'bold',
color:'magenta'
}
现在headerStyles可以在任何组件中使用。创建一个单独的组件，使用这些样式呈现一个简单的标题。
import React from 'react';
import {headerStyles} from './App'
const Header=()=>{
return(
<> <h1 style={headerStyles}>This is header component</h1> </>
)
}
export default Header;
在你的根组件内渲染该组件。
function App() {
return (
<>
<Header/>
</>
);
}
这样，您可以创建任意数量的样式对象，并将它们作为道具传递给组件或全局导出它们，以便任何组件都可以使用它们。
JS 中 CSS 的优缺点
让我们看看这种方法的优点和缺点，以便您了解何时何地为 React 组件使用默认样式。
优点
样式以声明的方式描述，并且易于阅读和维护。
CSS 样式发生冲突的可能性较小，也不需要手动覆盖。
它可以在组件内部使用，在某些情况下，也可以在父组件外部使用。
它使用 Nodejs 在运行时进行编译，提供高性能。
它消除了 CSS 样式表和大型复杂 CSS 模块的使用。
缺点
在 JS 中使用 CSS 的概念相当新，尚未被开发者社区完全接受。因此，其他使用您代码的开发人员可能会发现很难更改或修改这些样式。
其在文档层面提供的模块化程度较低。
它主要需要编译依赖项，例如jss、jss-preset-default或jss-cli。
为了实现更加定制的控制，您可能必须使用学习曲线更陡峭的库。
结论
尽管 JS 中的 CSS 尚未被广泛接受，但使用 React 组件的默认样式有时可以帮助您避免混乱的情况。当您只需要设置几个 JSX 元素的样式或必须创建具有固定样式的可重用组件时，它也很方便。但是，由于内联样式的众所周知的缺点，React 应用应仅将此方法与传统的基于类的样式方法结合使用，以设置组件样式，从而避免不一致和混乱。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
