react中使用样式的几种方式

1.使用常规方式

使用less|sass|css 文件引入使用
问题: 后面的样式会覆盖前面的样式会造成样式污染

2.将样式文件以module.less结尾

使用: 文件名.module.less 使用时webpack会处理
使用代码
- 公共样式common.module.css

.hoverColor:hover {
    color: red;
}

- Nav.jsx

import React from "react";
import sty from './Nav.module.css';
import common from './common.module.css';

const Nav = function Nav() {
    return <nav className={sty.box}>
        <h2 className={`${sty.title} ${common.hoverColor}`}>购物商城</h2>
        <div className={sty.list}>
            <a href="">首页</a>
            <a href="">秒杀</a>
            <a href="">我的</a>
        </div>
        <span className={sty.link}></span>
    </nav>;
};

export default Nav;

- Nav.module.css

.box {
    background: lightblue;
}

.box .title {
    font-size: 20px;
    color: lightcoral;
}

.list {
    font-size: 14px;
}

.list a {
    color: #000;
}

.list a:hover {
    color: red;
}

.link {
    composes: list; //使用其他地方的样式
    color: lightcoral;
}

:global(.clearfix) {
    clear: both;
}

3.使用第三方的依赖react.jss

使用下载:yarn add react.jss
相对于CSSModules的好处：因为样式是写在JS中的，我们就可以基于一些逻辑操作，实现样式的动态化管理！！
代码中使用

//import react from "react"
import {createUseStyles} from "react-jss"

const usestyles = createUseStyles({
    box:{
        color:'red',
        backfround:'#ff6700'
    },
    title:{
        color:props=>props.color,
        fontSize:props=>props.size
    },
    list:props=>{
        return {
            marginTop:"20px",
           '& span':{
               fontSize:props=>props.size+'px',
                color:'#ff6700',
                padding:"10px",
                border:'1px solid #ccc',
                
            }
        }
    }
})
const Demo = function Demo(){
    let {box,title,list} = usestyles({
        size:16,
        color:"orange"
    })
    return <>
      <div className={box}>react</div>
      <h1 className={title}>ces</h1>
      <div className={list}>
          <span>你好</span>
    </div>
    </>
}

export default Demo

4.使用第三方依赖styled-components

下载 yarn add styled-components
- 使用
- 公共样式 common.js

import styled from "styled-components";

/* 编写一些通用的样式 */
export const colorRed = "#ff4d4f";
export const colorBlue = "#1677ff";
export const titleSize = "18px";

export const CommonListBox = styled.ul`
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #999;

    li{
        font-size: 14px;
        line-height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        &:hover{
            color: ${colorRed};
        }
    }
`;

- 使用页面

import React from "react";
import styled from "styled-components";
import { CommonListBox, titleSize, colorRed } from './common';
/* 编写组件的样式：基于CSS-IN-JS思想中的styled-components插件 */
const MenuBox = styled.div`
    background-color: lightpink;
    width: 400px;

    .title{
        font-size: ${titleSize}px;
        line-height: 40px;

        &:hover{
            color: ${colorRed};
        }
    }

    li{
        font-size: 16px !important;
    }
`;

class Menu extends React.Component {
    render() {
        return <MenuBox>
            <h2 className="title">产品分类列表</h2>
            <CommonListBox>
                <li>手机</li>
                <li>电脑</li>
                <li>家电</li>
            </CommonListBox>
        </MenuBox>;
    }
};

export default Menu;

进阶使用
- Nav.jsx页面

import React from "react";
import { NavBox, NavBarBox } from './NavStyle';

const Nav = function Nav() {
    return <NavBox>
        <h2 className="title">购物商城</h2>
        <NavBarBox hover="#ffe58f" size={10}>
            <a href="/home">首页</a>
            <a href="/rush">秒杀</a>
            <a href="/my">我的</a>
        </NavBarBox>
    </NavBox>;
};

export default Nav;

- NavStyle.js样式

import styled from "styled-components";
import { colorRed, colorBlue, titleSize } from './common';

/*
 基于 “styled.标签名” 这种方式编写需要的样式
   + 样式要写在“ES6模板字符串”中
   + 返回并且导出的结果是一个自定义组件

 如果编写样式的时候没有提示，我们可以在vscode中安装一个官方插件：vscode-styled-components
 */
export const NavBox = styled.nav`
    background-color: lightblue;
    width: 300px;

    .title{
        font-size: ${titleSize};
        color: ${colorRed};
        line-height: 40px;

        &:hover{
            color: ${colorBlue};
        }
    }
`;

export const NavBarBox = styled.div.attrs(props => {
    return {
        size: props.size || 16
    }
})`
    line-height: 40px;

    a{
        font-size: ${props => props.size}px;
        color: #000;
        margin-right: 10px;

        &:hover{
            color: ${props => props.hover};
        }
    }
`;

React使用样式的方式

react中使用样式的几种方式