React 小册｜ CSS 解决方案本篇主要记录 📝 一下 tailwind 和 scss + css module

本篇主要记录 📝 一下 React 中使用 css 的一些方案

scss + css modules + antd 样式修改的问题
styled-components 这个库的使用
tailwind css （ 🔥 🔥 🔥 ）

本文仓库地址 github.com/rick-chou/o…

时光机 👾

scss + css modules

这是我之前使用的方式所以在这里记录一下

我们可以为对应的组件新建一个 index.module.scss 然后在里面书写 scss 的语法

然后在组件内我们便可以用模块的方式使用这些 css 样式了

举个 🌰

.container {
  background: yellow;
}

import styles from './index.module.scss';

const App = () => {
  return (
    <div className={styles.container}>
      <h1>Header</h1>
    </div>
  );
};

export default App;

如果项目中使用了 TS 的话还需要为index.module.scss定义声明文件

新建index.module.scss.d.ts

export const container: string;

当然如果不想为每一个样式手动编写声明文件的话

你可以试一下

typings-for-css-modules-loader

typescript-plugin-css-modules

前者可以自动的帮助你生成声明文件而后者需要配合 vscode 一起使用

以下为 typescript-plugin-css-modules 的配置

// compilerOptions
"plugins": [{ "name": "typescript-plugin-css-modules" }]

然后在 vscode 的setting.json 中

"typescript.tsserver.pluginPaths": ["typescript-plugin-css-modules"]

修改 antd 样式

我们引入一个 antd 的 Button

import styles from './index.module.scss';
import { Button } from 'antd';

const App = () => {
  return (
    <div className={styles.container}>
      <h1>Header</h1>
      <Button>Antd</Button>
    </div>
  );
};

export default App;

打开开发者调试工具我们可以看到

我们可以看到我们的 container 被加上了一串 hash 而 antd 的样式名没有加 hash

所以我们要告诉 scss 在我们书写 antd 的样式时不要加上 hash 这样样式名才会匹配样式才能生效

我们可以用:global来包裹住不想被加上 hash 的样式

.container {
  color: red;
}

:global {
  .ant-btn {
    width: 300px;
  }
}

这样 antd 的样式就可以被我们修改啦 😈

styled-components

基本使用

import styled from 'styled-components';

export const Header = styled.div`
  font-size: 20px;
  color: red;
`;

export const Footer = styled.div`
  color: yellow;
`;

用``包裹的语法是标签字符串

styled.div 这些都是第三方库中内置的方法

通过标签字符串我们不仅可以调用该方法而且可以在方法内部通过某种匹配得到每一个样式

最后在组件中我们可以像使用普通组件那样来使用 CSS 样式

import React from 'react';
import { Header, Footer } from './style';
export default function App() {
  return (
    <div>
      <Header>我是Header</Header>
      <Footer>我是Footer</Footer>
    </div>
  );
}

高级用法

添加 attrs 属性

const HYInput = styled.input.attrs({
  placeholder: "请填写密码",
})`

props 穿透

props 可以被传递给 styled 组件

在组件中我们传递 props

<Header color="blue"></Header>

在 styled 组件中我们可以接收到 props

const Header = styled.div`
  color: ${(props) => props.color};
}`;

支持伪类和伪元素

export const Footer = styled.div`
  color: yellow;
  &:hover {
    color: blue;
  }
  &::after {
    content: '页脚';
  }
`;

支持选择器嵌套

export const Footer = styled.div`
  color: yellow;

  p {
    color: red;
  }
`;

tailwind

这是作者最近一直在使用的方式非常推荐 🔥 🔥 🔥

使用起来也非常简单

安装 tailwindcss / postcss / autoprefixer

yarn add tailwindcss postcss autoprefixer -D
npx tailwindcss init

配置 tailwind.config 根据项目需要修改content内容

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

配置 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

在主入口的css文件中引入

@tailwind base;
@tailwind components;
@tailwind utilities;

然后就可以在项目中使用啦 🎉 🎉 🎉

<div className="text-4xl">tailwind css</div>

具体的css属性对应的tailwind写法可以参考

tailwindcss.com/docs/instal…

React 小册 ｜ CSS 解决方案