react学习笔记-2：样式初始化及sass使用

初始化样式

安装reset-css初始化样式：npm i reset-css
打开main.tsx文件，import引入。

import React from 'react'
import ReactDOM from 'react-dom/client'

//正确的样式引入顺序
//样式初始化一般放在最前面，引用reset-css
import "reset-css"

//UI框架的样式一般放在组件样式之前
//import XXXX

//组件的样式
import App from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

配置样式

安装sass：npm i --save-dev sass
tips：--save-dev 是将依赖放在devDependencies中，上线打包不会打入

创建./assets/styles/global.scss文件

$color:#2635db;
body{
    background-color: $color;
    //禁用选中文字
    user-select: none;
}
img{
    //禁止拖动图片
    -webkit-user-drag: none;
}

打开main.tsx文件，import引入

import React from 'react'
import ReactDOM from 'react-dom/client'

//正确的样式引入顺序
//样式初始化一般放在最前面，引用reset-css
import "reset-css"

//UI框架的样式一般放在组件样式之前
//import XXXX

//全局样式
import "./assets/styles/global.scss"

//组件的样式
import App from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

 模块化引入样式

//全局引入
// import "./comp1.scss" 

//模块化引入
import styles from "./comp1.module.scss" 

function Comp(){
    return(
        <div className={styles.box}>
            <p>这是Comp1里的内容</p>
        </div>
    )
}

另一种function的写法

//function Comp(){
// 另一种function的写法
const Comp = () => {
    return(
        <div className={styles.box}>
            <p>这是Comp1里的内容</p>
        </div>
    )
}