React 和 TypeScript 中的样式化组件

React 和 TypeScript 中的样式化组件

介绍

本文将通过一个示例运行在 React 中使用 styled-components 功能以使用 css 设置 React 组件的样式。本文的先决条件是安装了 nodejs。你可以安装它 这里 .你可以使用任何你想跟随这篇文章的 IDE，但我选择的工具是 视觉工作室代码 适用于所有 React 和 TypeScript 工作。

安装完 node 后，让我们开始使用 TypeScript 安装 React。从文件夹中的命令行运行以下节点脚本：

 npx create-react-app my-app --template typescript

运行上面的行将在 TypeScript 中生成一个示例反应项目，我们可以使用它来编写我们的示例。

Template React TypeScript App produced by npx generator

我们将首先将 App.tsx（主应用程序组件）编辑为一个简单的按钮，按下该按钮会更改浏览器中小区域的背景颜色。

这是在 App.tsx 中替换的代码：

 从“反应”导入反应，{ useState}  
 从“./logo.svg”导入徽标  
 导入'./App.css' 常量应用 = () => {  
 常量颜色：string[] = ['red', 'brown', 'lightgreen', 'yellow', 'green', 'orange', 'purple', 'blue' ] const [areaColor, setAreaColor] = useState('white') 常量 changeToRandomColor = () => {  
 setAreaColor(colors[Math.floor(Math.random() * colors.length)])  
 } 返回 （  
 <>  
 <div style={{ width: '50px', height: '50px', background: areaColor }}>{区域颜色}</div>  
 <button onClick={changeToRandomColor}>换颜色</button>  
 </>  
 )  
 } 导出默认应用程序；

这 div 在 App 组件的渲染部分中嵌入了样式。它的样式是一个正方形，宽 50 像素，高 50 像素。 div的背景颜色根据调用的状态分配一个值 区域颜色 .

该按钮没有样式，但是当在调用 changeToRandomColor 中单击该按钮时，这会将 div 的状态随机更新为 颜色 大批。

当我们使用以下命令运行代码时：

 npm 运行开始

我们在浏览器的 localhost:3000 上运行以下应用程序。请注意，如果您按下按钮，它将显示一个带有随机颜色名称和背景的正方形：

Button Causes Random Color to Display when Clicked

单击该按钮将显示从颜色数组中选择的不同随机颜色，并将其用作正方形内的背景颜色。

引入样式化组件

在我们的示例应用程序中，我们使用嵌入式样式设置了 div 的样式。让我们首先将这种风格转移到一个风格化的组件中，也许还要对其进行一些修饰。首先，我们将从 div 中移除除 areaColor 之外的嵌入样式。我们将暂时保留它：

 <div style={{ background: areaColor }}>{区域颜色}</div>

现在让我们安装 styled-components 以便我们可以使用它们进行样式设置。在与 package.json 相同目录的命令行中，运行以下命令：'

 npm install --save styled-components

通过查看 styled-components 显示在您的 包.json 文件作为依赖：

 “依赖”：{  
 "@ testing-library / jest-dom": "^ 5.16.5",  
 "@testing-library/react": "^13.3.0",  
 "@testing-library/user-event": "^13.5.0",  
 "@types/jest": "^27.5.2",  
 "@types/node": "^16.11.56",  
 "@types/react": "^18.0.17",  
 "@types/react-dom": "^18.0.6",  
 “反应”：“^18.2.0”，  
 “反应域”：“^18.2.0”，  
 “反应脚本”：“5.0.1”，  
    **"样式化组件": "^5.3.5",**  
 “打字稿”：“^4.8.2”，  
 “网络生命”：“^2.1.4”  
 }

现在让我们为之前设置样式的 div 创建第一个样式组件并调用它 样式化色块 .我们将在一个名为 index.tsx.style 作为 index.tsx 的同级文件。在其中，我们将创建样式组件，如下所示：

 从“样式组件”导入样式 导出 const StyledColorBlock = styled.div`  
 宽度：50px；  
 高度：50px；  
 `

请注意，使用样式组件，我们只需将组件分配给基本 html 组件，并使用 css 为组件设置样式。

现在我们需要做的就是在我们的 App.tsx 文件中使用我们样式化的组件来代替现有的 div。不要忘记在 App.tsx 的顶部导入样式组件！ ：

 从 './index.style' 导入 { StyledColorBlock } 常量应用 = () => {  
 常量颜色：string[] = ['red', 'brown', 'lightgreen', 'yellow', 'green', 'orange', 'purple', 'blue' ] const [areaColor, setAreaColor] = useState('white') 常量 changeToRandomColor = () => {  
 setAreaColor(colors[Math.floor(Math.random() * colors.length)])  
 } 返回 （  
 <>  
 <StyledColorBlock style={{background: areaColor }}>{区域颜色}</StyledColorBlock>  
 <button onClick={changeToRandomColor}>换颜色</button>  
 </>  
 )  
 }

StyledColorBlock used in place of div

让我们更进一步。让我们通过圆角使我们的 div 变成一个圆形，而不是正方形，然后在圆形周围放置一个漂亮的黑色边框。让我们在圆圈周围留一点边距，让它与按钮有一些空间，最后让我们使用 flex 使文本居中：

 从“样式组件”导入样式 导出 const StyledColorBlock = styled.div`  
 宽度：100px；  
 高度：100px；  
 边框半径：50px；  
 轮廓：纯色 3px 黑色；  
 边距：20px；  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 `

现在我们的 StyledColorBlock 和按钮在浏览器中看起来像这样：

Square Becomes a Circle with Centered Text

向样式化组件添加参数

假设我们要从 App.tsx 中删除任何样式属性信息并将其移动到 StyledColorBlock。在这种情况下，我们需要将 areaColor 传递到 StyledColorBlock 中，而不是将其嵌入到样式中。那么我们该怎么做呢？好吧，您实际上可以将参数直接传递给样式化组件本身。让我们看看这是如何完成的：

让我们首先用一个名为的新属性替换 StyledColorBlock 上的样式属性 充满 并将 areaColor 状态传递给我们的样式组件。

 <StyledColorBlock fill={areaColor}>{区域颜色}</StyledColorBlock>

我们可以将填充道具接收到 StyleColorBlock 的背景中，如下所示。

 export const StyledColorBlock = styled.div < { fill: string } >`  
 宽度：100px；  
 高度：100px；  
 边框半径：50px；  
 轮廓：纯色 3px 黑色；  
 边距：20px；  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 背景：${prop => prop.fill}  
 `

这种语法是样式组件独有的，背景属性实际上是接收一个返回道具填充值的函数。

如果我们运行 npm：

 npm 运行开始

我们看到了与嵌入样式相同的结果：

Removing the embedded style and replacing with a prop to the Styled Component

处理事件

让我们通过将按钮设置为样式组件来稍微修饰一下我们的按钮。我们将在 index.style.tsx 文件中添加一个新的样式组件，名为 样式更改颜色按钮 .此样式组件使用组件 style.button。

 导出 const StyledChangeColorButton = styled.button `  
 宽度：100px；  
 高度：32px；  
 背景：#CC0055；  
 轮廓：纯色 2px 紫色；  
 边距：30px；  
 白颜色;  
 边框半径：5px  
 `

我们将用这个新样式的组件按钮替换 App.tsx 中现有的按钮。

Changing the generic button appearance with Styled Components

现在假设我们希望每次将鼠标悬停在此按钮上时都将其颜色更改为蓝色。样式化组件让我们能够处理典型的浏览器状态，并能够将它们添加到样式组件的 css 中。下面我们将悬停事件处理程序添加到我们的按钮样式组件中，以使背景颜色变为蓝色：

 导出 const StyledChangeColorButton = styled.button `  
 宽度：100px；  
 高度：32px；  
 背景：#CC0055；  
 轮廓：纯色 2px 紫色；  
 边距：30px；  
 白颜色;  
 边框半径：5px； &:悬停{  
 背景：蓝色；  
 }  
 `

当我们将鼠标悬停在按钮上时，结果会显示在浏览器中，如下所示：

Changing the Button Appearance when we Hover Over it

动画圆

让我们看看我们是否可以实时旋转我们的圆圈并让它随着旋转而增长。

我们需要导入样式化的组件 关键帧 图书馆以实现这一目标。然后我们将使用关键帧为我们的圆形 div 设置动画。为了使用关键帧组件进行旋转和缩放，我们将圆形 div 从 0 度旋转到 360 度。然后，我们将在每个关键帧百分比处指定我们的圆圈大小和字体大小，以使圆圈看起来像是在同时增长和旋转。

 导出 const pulseAnimation = 关键帧`  
 从 {  
 变换：旋转（0度）；  
 }  
 至 {  
 变换：旋转（360度）；  
 }  
 0% { 字体大小：5px;宽度：25px；高度：25px； }  
 33% { 字体大小：10px;宽度：40px；高度：40px； }  
 66% { 字体大小：15px;宽度：75px；高度：75px； }  
 100% { 字体大小：20px;高度：100px；宽度：100px； }`

Animating the circle by spinning it and growing it at the same time

结论

样式化的组件是 react 的强大补充，并提供了一种组织 React 组件的 css 样式的好方法，因此您的 React 不会变得混乱。在本文中，我们学习了使用样式组件来增强组件的外观，如何将 react props 传递给样式组件，如何响应样式组件上的事件以及如何为样式组件设置动画。我们希望您喜欢阅读。

如果你想了解更多关于 React 的知识，可以购买我的书 创造 单词 使用 React 和 TypeScript .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1704/11263016