反应样式组件模块

Styled-component Module 允许我们在 React 中以非常模块化和可重用的方式在 JavaScript 中编写 CSS。我们可以使用 styled-component 来增强开发人员体验，而不是为 React 项目使用一个全局 CSS 文件。它还删除了组件和样式之间的映射——使用组件作为低级样式构造

styled-component 的主要特点：

• 自动供应商前缀
• 随处更换书写风格道具。
• 支持媒体查询（与样式道具不同）。
• 易于维护

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app styled

注意：如果你之前已经通过 npm 全局安装了 create-react-app，直接使用下面的命令。您的开发环境已准备就绪。现在让我们在我们的应用程序中安装 styled-components。

第 2 步：创建项目文件夹（即 styled）后，移至同一文件夹：

cd styled

第 3 步：安装 styled-components：styled-components 可以通过 npm 在您的 React 应用程序中安装。按照下面给出的步骤在您的 React 应用程序中安装 styled-components。要安装样式组件，请使用以下命令：

使用 npm：

npm install --save styled-components

用纱线：

yarn add styled-components

项目结构：它将如下所示。

项目结构

第 4 步：要在您的应用程序中添加样式组件，请在您使用的编辑器中打开您的项目目录。

并转到 app.js 文件。现在，在 app.js 中添加下面给出的代码。

import styled from "styled-components"

示例：现在在App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。要使用 styled-components，让我们首先在 react 应用程序中创建一个组件。在您的项目目录中，在 src 文件夹中创建一个名为 Button.js 的文件。

App.js

import Button from './Button'
  
function App() {
  return (
    

       Click 
    
  );
}
  
export default App;

在模板字符串中添加基本的 CSS 属性。此外，在 Button 组件中，我们添加了一个 div 元素。 （我们可以添加styled.div或styled.span或您自己的 React 组件）

按钮.js

import styled from 'styled-components'
  
const Button = styled.div`
    width : 100px ;
      cursor: pointer ;
    text-docration : none;
    color : white ;
    background-color : purple;
    margin : 0 auto ;
    font-size:2rem; 
`
  
export default Button;

要创建多个不同样式值的按钮（例如：不同的颜色），我们可以再次使用这个不同的 styled-Button 组件，也可以只传递 props。

第 5 步：

传递道具

为了使样式化的组件更具动态性，我们可以像在 React 组件中传递 props 一样传递 props。

在 App.js 中，我们传递了一个名为 bg 的 prop 和一个颜色值。

应用程序.js

import Button from './Button'
  
function App() {
  return (
    

       Click 
       Click 
    
  );
}
  
export default App;

在 Button.js 中，background-color 的值我们传递一个模板字符串，其中使用三元运算符我们可以检查 props.bg 属性的值，并相应地设置 background-color 的值。此外，如果任何 CSS 属性需要前缀，那么 styled-component 会自动执行。

background-color : ${props => 
    props.bg === "green" ? "green" : "yellow"};

按钮.js

Javascript

import styled from 'styled-components'
  
const Button = styled.div`
    height:50px
    width : 100px ;
    cursor: pointer ;
    text-docration : none;
    color : blue;
    background-color : ${props => props.bg === 
                      "green" ? "green" : "yellow"};
    margin: 0 auto;
    font - size: 3rem;
`
  
export default Button;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：