React中组件设置样式的几种方法

淡淡的烟草味﹌ 2022-10-31 12:16 450阅读 0赞

方式一： 使用普通style样式

// 让数组中的每一项变成双倍
    const numbers = [2,2,4,5];
    const doubles = numbers.map((item,index) => {
      return <li style={
       { color: 'red', fontWeight: 200 }} key={index}> {item * 2}}</li>
    })

方式二：样式对象和UI结构分离

const userStyle = { color: 'red', fontWeight: 200 };
    // 让数组中的每一项变成双倍
    const numbers = [2,2,4,5];
    const doubles = numbers.map((item,index) => {
      return <li style={userStyle} key={index}> {item * 2}}</li>
    })

方式三：//第二种封装方式：合并成一个大的样式对象

const styles = {
        item: {border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 #ccc'},
        user: {fontSize: '14px'},
        content: {fontSize: '12px'}
    } 
    //使用function构造函数定义普通的无状态组件
    export default function CmtItem(props){
        return <div style = {styles.item}>
                 <h1 style = {styles.user}>评论人：{props.user}</h1>
                 <p style = {styles.content}>评论内容：{props.content}</p>
                 </div> 
     }

方式四：**抽离为单独的样式模块：**创建一个style.js文件：

export default{
        item: {border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc'},
        user: {fontSize: '14px'},
        content: {fontSize: '12px'}
    }

//封装方式:抽离为单独的样式模块
    import styles from '@/components/styles.js'
    
    //使用function构造函数定义普通的无状态组件
    export default function CmtItem(props){
        return <div style = {styles.item}>
                 <h1 style = {styles.user}>评论人：{props.user}</h1>
                 <p style = {styles.content}>评论内容：{props.content}</p>
                 </div> 
     }

方式五：**创建样式表文件（该方法具体后续再写）**