DEV Community
·
React 基础：组件样式/内联样式
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
在JavaScript中，内联样式使用'style'属性，属性名采用驼峰命名，如fontWeight: 'bold'。如果使用CSS风格（kebab-case），需要用引号包裹。示例代码展示了一个按钮，点击后背景变为粉色，并在中心显示'Clicked!'。
🎯
关键要点
- 内联样式必须在JavaScript中编写。
- 属性名必须为'style'。
- 设置样式时，属性名需采用驼峰命名法，例如fontWeight: 'bold'。
- 如果使用CSS风格（kebab-case），需要用引号包裹。
- 示例代码展示了一个按钮，点击后背景变为粉色，并在中心显示'Clicked!'。
❓
延伸问答
如何在React中使用内联样式？
在React中，内联样式必须通过'style'属性编写，属性名需采用驼峰命名法。
内联样式的属性名应该如何命名？
内联样式的属性名必须采用驼峰命名法，例如fontWeight: 'bold'。
如果使用CSS风格的属性名，应该怎么处理？
如果使用CSS风格（kebab-case），需要将属性名用引号包裹，例如'border-radius'。
示例代码中按钮的背景颜色如何变化？
按钮的背景颜色在被点击时会变为粉色，使用isSelected状态来控制。
如何在React组件中处理点击事件？
可以通过useState钩子管理状态，并在按钮的onClick事件中调用状态更新函数。
内联样式与外部CSS样式有什么区别？
内联样式直接在组件中定义，而外部CSS样式通常在单独的CSS文件中定义。
🏷️
标签
➡️
