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管理按钮的选中状态，点击按钮切换样式。
🏷️
标签
➡️
