Vue3 第二十九篇：JSX中引入外联css文件

外联样式分为两种：全局外联样式和组件级的外联样式（相当于vue单文件的scope）

1.全局外联样式

.demo {
  font-size: 50px;
}

注意：使用的时候“demo”是字符串，不是变量名。

import "./helloworld.css";
const HelloWorld = () => {
  return (
    <>
      <div className={"demo"}>
        壁立千仞
      </div>
    </>
  );
};
export default HelloWorld;

2.组件级外联样式

css文件名必须是：样式名称.module.css

注意两点：

1、这里使用的时候就是用变量名了，而不是字符串

2、css文件中的选择器名称不要有中划线

import style from "./helloworld.module.css";
const HelloWorld = () => {
  return (
    <>
      <div className={style.demo}>
        壁立千仞
      </div>
    </>
  );
};
export default HelloWorld;