antd组件的格式化css样式

慕仲卿2023-11-23 19:50

本文叙述了如何解决前端开发中经常遇到的一个棘手问题，即：如何修改antd组件内部元素的样式。

以Input组件为例，如果我想通过下面这种方式设置input组件的样式，是实现不了目的的！

jsx 复制代码

      <Input
        style={{
            background: `${error ? '#fff' : 'auto'}`,
            borderColor: `${error ? '#ff4d4f' : 'auto'}`,
        }}
        className={`${error ? 'input-status-error' : ''}`}
        {...props}
      ></Input>

原因也很简单，antd提供的Input组件本质上是span>input，所以style实际上设置到了wrapper组件也就是外面的span上面。

这就尴尬了，因为有时候确实是需要修改被包裹的input的样式的。

这个时候一般来说有两种做法：

做法一：使用styled-components

如下所示：

jsx 复制代码

import styled from 'styled-components';
const IInput = styled(Input)`
    input.input-status-error {
        background: #fff;
        borderColor: #ff4d4f;
    }
`;

<IInput
    className={`${error ? 'input-status-error' : ''}`}
    {...props}
></IInput>

做法二：使用less

如下所示：

jsx 复制代码

import styled from 'styled-components';
<Input
    className={`${error ? 'input-status-error' : ''}`}
    {...props}
></Input>

less 复制代码

input.input-status-error {
    background: #fff;
    borderColor: #ff4d4f;
}

这两个办法都有各自的缺点：

styled方法会动态生成className，这意味着你可能会遇到由于其动态修改className导致使用input输入文字的过程中，无缘无故的失去焦点，这对于交互是不可忍受的！

less方法最大的问题就是，它可能并不会生效！

好在antd升级之后提出了解决方案：

也就是说可以使用styles做结构性样式的设置（注意这里是styles而不是style！）

这样如果想要修改Input中包裹的input组件的样式，写成下面就可以了！

jsx 复制代码

      <Input
        styles={{
          input: {
            background: `${error ? '#fff' : 'auto'}`,
            borderColor: `${error ? '#ff4d4f' : 'auto'}`,
          },
        }}
        className={`${error ? 'input-status-error' : ''}`}
        {...props}
      ></Input>