react常见的样式类型:
提示:以下是本篇文章正文内容,下面案例可供参考
一、内联样式
与普通的HTML内联样式唯一的区别就是,JSX中的内联样式是一个对象,而不是一个字符串。
import React,{
useState} from 'react'
export default function Style({
textColor='pink'}) {
const [loading,setLoading]=useState(true)
const style1={
color: 'blue',
}
return (
<>
<p style={
{
color:'red'}}> 内联样式设置文字颜色为红 </p>
<p style={
{
color:loading?'red':'black'}}> 使用三目运算符选择样式 </p>
<h1 style={
{
textAlign: "left" }}> 样式属性出现多个词的时候 用驼峰命名法 </h1>
<p style={
style1}> 将样式定义为一个常量 这样可以在多个组件上重用 </p>
<p style={
{
...style1, fontSize: 30}}> 在重用时继续扩展对象的样式 </p>
<p style={
{
color:textColor}}> 也可以使用变量 动态展现样式的变化</p>
</>
)
}
二、css样式表
在普通的HTML中,我们会使用class来定义类,而JSX中会使用className来定义,因为class是JavaScript中的一个保留字
style.js
import React from 'react'
import './Style.less'
export default function Style() {
return (
<div>
<p className='style2'>css样式表来设置样式</p>
</div>
)
}
style.less
.style2{
color:aqua
}
三、css模块化
使用babel-plugin-react-css-modules 插件 至于怎么配置 有大佬吗。。。。配置了一天都没弄出来
总结
求大佬赐教!!!!