前端 - 如何优雅地覆盖antdesign的样式?

Question

如何优雅地覆盖antdesign的样式?

我想要把将这个button的border去掉(只是这个button，不影响其他button的样式)。

import React from "react";import PropTypes from "prop-types";import { Button, Flex, ConfigProvider } from "antd";import Icon from "@ant-design/icons";import Sort from "../../assets/sort.svg?react";console.log("sort: ", Sort);function CommentTitle({ commentsCount, chooseSortRule }) {  return (    <Flex gap="middle" align="center">      <div>{commentsCount > 0 ? commentsCount + " " : ""}留言</div>      <Flex gap="small" align="center">        <ConfigProvider wave={{ disabled: true }} theme={{ cssVar: true }}>          <Button icon={<Icon component={Sort} />} />        </ConfigProvider>        排序      </Flex>    </Flex>  );}

1. className or style都不行，Button组件没有提供这两个prop。倒是有一个classNames不知道是干什么的。

2. 在index.css中添加以下规则，倒是可以去除Button上的border但是会影响所有的Button样式。

   .ant-btn { border: none;}

3. 通过ConfigProvier来设置Button组件的token，但是没有将border直接设置为none的token，只有一些token用来设置不同状态下border的颜色。我可以将这些颜色设置为transparent，让它看起来没有border。此时，可以达到了预期，但是要修改不少的token。

有没有其他更优雅一些的方法?

Answer 1

rootClassName

<Button rootClassName="my-button" icon={<Icon component={Sort} />} />

Answer 2

要优雅地覆盖 Ant Design 的 Button 组件样式而不影响其他 Button，你可以使用 CSS Modules 或者 CSS-in-JS 库（如 styled-components 或 emotion）来创建一个具有特定样式的组件。这样，你可以为需要自定义样式的 Button 应用一个独特的类名或样式对象，而不会影响到其他 Button。

以下是使用 CSS Modules 的方法：

1. 创建一个 CSS 文件（例如 CommentTitleButton.module.css），并在其中定义你的自定义样式：

/* CommentTitleButton.module.css */.noBorderButton {  border: none !important; /* 使用 !important 确保覆盖 Ant Design 的默认样式 */  /* 其他自定义样式 */}

2. 在你的 React 组件中导入这个 CSS 文件，并使用它来应用样式：

import React from "react";import { Button, Flex } from "antd";import Icon from "@ant-design/icons";import Sort from "../../assets/sort.svg?react";import styles from './CommentTitleButton.module.css'; // 导入 CSS Modulesfunction CommentTitle({ commentsCount, chooseSortRule }) {  return (    <Flex gap="middle" align="center">      <div>{commentsCount > 0 ? commentsCount + " " : ""}留言</div>      <Flex gap="small" align="center">        <Button          className={styles.noBorderButton} // 应用自定义样式类名          icon={<Icon component={Sort} />}        />        排序      </Flex>    </Flex>  );}export default CommentTitle;

使用 CSS Modules，每个类名在构建时都会被转换成一个唯一的类名，这确保了样式的局部性，即样式只应用于当前组件，不会影响到其他组件。

注意：!important 的使用应谨慎，因为它会提高样式的优先级，可能导致样式难以覆盖。但是，在覆盖第三方库的默认样式时，有时它是必要的。

如果你更倾向于使用 CSS-in-JS 解决方案，你可以使用 styled-components 或 emotion 来创建一个带有自定义样式的组件，如下所示：

import React from "react";import styled from 'styled-components'; // 导入 styled-componentsimport { Button, Flex } from "antd";import Icon from "@ant-design/icons";import Sort from "../../assets/sort.svg?react";const StyledButton = styled(Button)`  border: none; /* 自定义样式 */  /* 其他自定义样式 */`;function CommentTitle({ commentsCount, chooseSortRule }) {  return (    <Flex gap="middle" align="center">      <div>{commentsCount > 0 ? commentsCount + " " : ""}留言</div>      <Flex gap="small" align="center">        <StyledButton icon={<Icon component={Sort} />} /> {/* 使用自定义样式的 Button */}        排序      </Flex>    </Flex>  );}export default CommentTitle;

使用 styled-components 或 emotion，你可以直接在组件内部定义样式，并且这些样式会自动应用到对应的组件实例上，同样达到了局部化和优雅覆盖 Ant Design 样式的效果。