antd组件的格式化css样式

本文叙述了如何解决前端开发中经常遇到的一个棘手问题,即:如何修改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>
相关推荐
yqcoder2 分钟前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_8827275711 分钟前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
会发光的猪。1 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客1 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记1 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安1 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼2 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo2 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花2 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ2 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue