在 ReactJS 中使用样式化 API

ReactJS 中的样式化组件是一个 CSS-in-JS 库，可用于更好的 UI 设计。此 API 允许我们创建样式化组件并应用所有样式化属性。为了在 React 中使用 Styled API，我们需要安装 styled 组件。

先决条件：

• ReactJS 的基础知识
• 已经创建了 ReactJS 应用

在 ReactJS 中使用样式化组件的步骤：

第 1 步：在继续之前，首先我们必须安装样式组件，通过在项目目录中运行以下命令，在src文件夹中的终端的帮助下，或者您也可以在项目中的 Visual Studio Code 终端中运行此命令文件夹。

npm install --save styled-components

第 2 步：安装模块后，现在打开项目目录中src文件夹下的 App.js 文件。

第 3 步：现在导入 React 和样式化模块。

第 4 步：在您的 App.js 文件中，添加此代码片段以导入 React 和样式化模块。

import React from 'react';
import styled from 'styled-components';

下面是一个示例程序来说明 styled-components 的使用：

示例 1：将按钮的背景颜色更改为绿色。

应用程序.js：

Javascript

import React from 'react';
  
// Importing styled from styled-components
import styled from 'styled-components';
  
// Importing the background-color of your 
// choice to the button using css
// Button component that will render an  
// tag with some styles using styled.
const Button = styled.a`
  background-color:green;
  color: white;
  padding: 1rem 2rem;
  margin-top:100px;
  width: 150px;
  display: block;
`
const App = () => {
  return (
    GeeksforGeeks
  )
}
  
export default App;

---

Javascript

import React from 'react';
  
// Importing styled from styled components
import styled from 'styled-components';
  
// Importing the background-color of your 
// choice to the button using css
// Button component that will render an 
// tag with some styles using styled.
const Button = styled.a`
  background-color:green;
  color: white;
  padding: 1rem 2rem;
  margin-top:100px;
  width: 150px;
  display: block;
  border:8px solid black;
`
const App = () => {
  return (
    GeeksforGeeks
  )
}
  
export default App;

---

输出：

示例 2 ：为按钮添加边框。

应用程序.js：

Javascript

import React from 'react';
  
// Importing styled from styled components
import styled from 'styled-components';
  
// Importing the background-color of your 
// choice to the button using css
// Button component that will render an 
// tag with some styles using styled.
const Button = styled.a`
  background-color:green;
  color: white;
  padding: 1rem 2rem;
  margin-top:100px;
  width: 150px;
  display: block;
  border:8px solid black;
`
const App = () => {
  return (
    GeeksforGeeks
  )
}
  
export default App;

输出：

因此，通过上述步骤，我们可以使用 Styled-components 在 React 中导入和更改组件的样式。