React常见的样式类型：

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 插件 至于怎么配置 有大佬吗。。。。配置了一天都没弄出来

总结

求大佬赐教！！！！