React 小册｜ CSS 解决方案

本篇主要记录 📝 一下 scss + css modules + antd 样式修改的问题

以及 styled-components这个库的使用

时光机 👾

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

这个 loader 可以自动的帮助你生成声明文件

修改 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;
  }
`;
复制代码