ReactJS - 内联样式

React 提供了一种独特的方式，可以在 react 组件中直接编写 CSS 并在 JSX 中使用它。这个概念在 JS 中被称为 CSS，与传统的样式使用相比，它提供了许多优势。

让我们了解什么是内联样式以及如何使用它 react 组件。

内联样式的概念

CSS 使开发人员能够设计 Web 应用程序的 UI。React 为 CSS 提供了一流的支持，并允许将 CSS 直接导入到 react 应用程序中。直接将 CSS 导入到 react 组件中就像导入包一样简单。

 import './App.css'

但是，将 css 直接导入到 Web 组件中有一个主要缺点，即全局命名空间。如果类名中存在冲突，则全局样式可能会影响单个组件的样式。开发人员需要小心分配一些前缀，以确保不会发生冲突。

另一种方法是允许 Javascript 管理 CSS，在 JS 中称为 CSS。React 允许通过特殊的 CSS 语法在 JSX 内部使用 CSS。React 为每个组件提供了一个样式属性，可以用来指定内联样式。内联样式应在 Javascript 对象中提供。对象应遵循以下提到的规则，

• 对象键应该是普通 CSS 属性的 CamelCased 版本。例如，background-color 应指定为 backgroundColor。

{
	 	backgroundColor: "red"
}

• 对象值应该是 CSS 中相应对象键的允许值之一，并且应为字符串格式。例如，font-size CSS 属性及其值 （12px） 应按如下方式指定 -

{
	 	fontSize: "12px"
}

React 将处理冲突并正确呈现应用程序。

应用内联样式

在本节中，让我们学习如何在 react 应用程序中应用内联样式。

首先，创建一个新的 react 应用程序并使用以下命令启动它。

接下来，打开 App.css （src/App.css） 并删除所有 CSS 类。

 // remove the css

接下来，创建一个简单的组件 SimpleStyle （src/Components/SimpleIcon.js），如下所示 -

import React from "react";
class SimpleStyle extends React.Component {
	 	displayStyle = {
	 	 	 fontFamily: 'Times New Roman',
	 	 	 fontSize: "24px",
	 	 	 color: "red"
	 	}
	 	render() {
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <div style={this.displayStyle}>
	 	 	 	 	 	 	 	Sample text to understand inline style (object as variable) in React component
	 	 	 	 	 	 </div>
	 	 	 	 	 	 <hr />
	 	 	 	 	 	 <div style={{ fontFamily: 'Arial', fontSize: "24px", color: "grey"}}>
	 	 	 	 	 	 	 	Sample text to understand inline style (object as expression) in React component
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 )
	 	}
}
export default SimpleStyle

在这里，我们有，

• 使用变量 （displayStyle） 设置第一个 div 的样式。
• 使用 expression 设置了第二个 div 的样式。

接下来，打开 App 组件（src/App.js），并使用 SimpleStyle 组件更新内容，如下所示 -

import './App.css'
import React from 'react';
import SimpleStyle from './Components/SimpleStyle'

function App() {
	 	return (
	 	 	 <div className="container">
	 	 	 	 	<div style={{ padding: "10px" }}>
	 	 	 	 	 	 <div>
	 	 	 	 	 	 	 	<SimpleStyle />
	 	 	 	 	 	 </div>
	 	 	 	 	</div>
	 	 	 </div>
	 	);
}
export default App;

在这里，我们有，

• 导入了 SimpleStyle 组件。
• 使用 SimpleStyle 组件来渲染日历图标。

最后，在浏览器中打开应用程序。内容将如下所示 -

总结

内联样式帮助开发者快速包含CSS样式，而不必担心CSS样式的冲突。此外，语法与 CSS 非常相似，它使开发人员可以轻松使用该功能，而无需太多的学习曲线。