1.6 行间样式，全局样式，局部样式的使用

一、补充

1. 变量的内容可以成JSX

   const demo = <div>头部</div>

   备注：

   定义的JSX变量可以直接在页面中渲染；

   可以组件中内容传递使用；

二、行间样式

1. style={对象}

   function App() {
     return (
       <div style={{ width: '100px', height: '100px', backgroundColor: 'blue' }}>
         Hello App
       </div>
     )
   }
   
   export default App
   
   
   // 或者抽成变量
   function App() {
     const myStyle = { width: '100px', height: '100px', backgroundColor: 'blue' }
     return (
       <div style={myStyle}>Hello App</div>
     )
   }
   
   export default App
   

   注意：

   单位默认px，不写也可以

   style样式要写驼峰，不可以写成短线-

三、全局样式

1. Xxx.css

2. 需要定义一个CSS文件

   .box {
     width: 300px;
     height: 100px;
     background-color: aqua;
   }

   文件名：04.css

3. 文件修改：

   import './04.css'
   
   function App() {
     return <div className="box">demo</div>
   }
   
   export default App
   

4. 因为任何文件都可以使用，因此称为全局样式

5. 建议CSS具有针对性，因此出现局部样式

四、局部样式

1. Xxx.module.css

2. 命名需要再名字与css之间添加module，以此来定义局部样式文件

3. 引用时候，需要针对局部样式进行重命名，使用时，用重命名.样式名使用

   .box2 {
     background: green;
     color: white;
   }

   文件名：05.module.css

   import './04.css'
   // 需要重命名
   import style from './05.module.css'
   
   function App() {
     const myStyle = { width: '100px', height: '100px', backgroundColor: 'blue' }
     return (
       <>
         <div className="box"></div>
         {/* 重命名.css样式名 */}
         <div className={style.box2}>模块化css</div>
       </>
     )
   }
   
   export default App
   

五、补充

1. 如果css命名出现短线写法：

   .box2 {
     background: green;
     color: white;
   }
   
   .head-title {
       background: pink;
   }
   
   .head-title-icon {
       background: yellow;
   }

   备注：这里补充的是05.module.css文件

2. 文件中的调用方式：

import './04.css'
import style from './05.module.css'

function App() {
  const myStyle = { width: '100px', height: '100px', backgroundColor: 'blue' }
  return (
    <>
      <div className="box"></div>
      {/* 重命名.css样式名 */}
      <div className={style.box2}>模块化css</div>
      <div className={style['head-title']}>模块化css2</div>
    </>
  )
}

export default App

使用短线需要用：重命名['样式名']来实现调用

不可以直接使用驼峰

1. 如果想用使用驼峰：

   1. 修改vite.config.js:

      import { defineConfig } from 'vite'
      import react from '@vitejs/plugin-react-swc'
      import eslintPlugin from 'vite-plugin-eslint'
      
      // https://vitejs.dev/config/
      export default defineConfig({
        plugins: [
          react(),
          eslintPlugin({
            include: ['src/*.jsx', 'src/**/*.jsx']
          })
        ],
        css: {
          modules: {
            localsConvention: 'camelCase'
          }
        }
      })
      

      添加CSS配置

   2. 代码中可以使用驼峰配置：

      import './04.css'
      // 需要重命名
      import style from './05.module.css'
      
      function App() {
        const myStyle = { width: '100px', height: '100px', backgroundColor: 'blue' }
        return (
          <>
            <div className="box"></div>
            {/* 重命名.css样式名 */}
            <div className={style.box2}>模块化css</div>
            <div className={style.headTitle}>模块化css2</div>
          </>
        )
      }
      
      export default App
      

      备注：功能实现主要是因为Vite的配置选项，具体详情看Vite的有关CSS的配置