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>
相关推荐
fg_411几秒前
无网络安装ionic和运行
前端·npm
理想不理想v2 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云12 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058714 分钟前
web端手机录音
前端
齐 飞19 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹36 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试