DEV Community
·
React 基础：组件样式与 CSS in JS
💡
原文英文，约300词，阅读约需1分钟。
📝
内容提要
在JavaScript中使用styled-components库可以实现CSS样式。首先安装并导入库，然后定义样式组件，如`StyledButton`，根据`isSelected`属性动态改变背景色，并使用媒体查询调整样式。可以通过继承创建`OrangeButton`，并添加悬停效果。使用`useState`管理状态，点击按钮切换样式。
🎯
关键要点
- 可以使用styled-components库在JavaScript中编写CSS样式。
- 通过命令npm i styled-components安装styled-components库。
- 定义样式组件StyledButton，根据isSelected属性动态改变背景色。
- 使用媒体查询调整样式，例如在屏幕宽度小于600px时改变border-radius。
- 通过继承创建OrangeButton，并添加悬停效果。
- 使用useState管理按钮的选中状态，点击按钮切换样式。
❓
延伸问答
如何在JavaScript中使用styled-components库？
可以通过命令npm i styled-components安装styled-components库，然后在代码中导入并定义样式组件。
StyledButton组件是如何根据isSelected属性改变样式的？
StyledButton组件的背景色根据isSelected属性动态改变，isSelected为true时背景色为粉色。
如何使用媒体查询调整StyledButton的样式？
可以在StyledButton中使用媒体查询，例如在屏幕宽度小于600px时改变border-radius为0。
OrangeButton组件是如何继承StyledButton的？
OrangeButton通过styled(StyledButton)创建，继承了StyledButton的样式，并添加了悬停效果。
如何使用useState管理按钮的选中状态？
通过useState定义isSelected状态，并在点击按钮时切换其值，从而管理按钮的选中状态。
StyledButton和OrangeButton的主要区别是什么？
StyledButton的背景色根据isSelected属性变化，而OrangeButton始终为橙色，并在悬停时改变颜色和透明度。
🏷️
标签
➡️
