如何修改ant design组件自带样式

目录
  • 修改ant design组件自带样式
    • 背景
    • 需求
    • 解决方法
    • Notice
  • 更改antd 默认样式
    • 更改ant design 默认样式

修改ant design组件自带样式

背景

Vue-CLI创建的项目

需求

把走马灯的面板指示点（如图1）改成真正的点（如图2）

解决方法

走马灯自带面板指示点类名dotsClass = "slick-dots"，考虑到项目中可能多处会用到走马灯，请自行更改类名（我的项目只有一处用到，故不想改）

在src/assets/style/（这个是我用来放全局样式文件目录）下新建一个.css文件（其它类型的stylesheet文件也可以用，但我没试过），再次强调，如同一组件须多次使用、且样式要求不同，请自行更改类名，样式文件也请分开创建，注意互相覆盖问题。

在需要用到此样式的<style></style>内引入该文件，如下

<style lang='scss' scoped>
@import '~@/assets/style/carousel.css';        //我不确定其他样式语言是否支持@import
</style>

webstorm用户使用import可能会报错，请移步至Setting > Language & Frameworks > JavaScript > Webpack 将webpack configuration file路径切换至：当前项目绝对路径\node_modules\@vue\cli-service\webpack.config.js，报错消失。

Notice

根据我的实验，直接在组件使用的单页面模板内修改组件内部样式无用，加上/deep/、::v-deep都没用。

关于组件内部元素的类名，请自行在开发者工具中检查，然后再到样式文件修改（这是最麻烦的地方），建议在sandbox中对单个组件进行试验后，再到项目修改测试，因为sandbox对样式的响应比较快。

自己预设的其他全局样式对组件没用（至少我的是这样），如*{ box-sizing: border-box; }，需要在刚刚建的单独样式文件里重新申明。

更改antd 默认样式

更改ant design 默认样式

如果提供的api可以修改样式，则可以通过api直接修改。

如果提供的api达不到想要的效果，可以通过className的方式来修改样式。

例如：

我想修改司机这一行的高度

在控制台中找到对应的样式

将:global放在一个较大的父级容器中

注意：:global后不能有空格

.ChartCard :global(.antd-pro-components-charts-chart-card-index-chartCard .antd-pro-components-charts-chart-card-index-total) {
  height: 76px;
}

修改后：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈Ant Design Pro 菜单自定义 icon

    Ant Design Pro 官方文档说明 在菜单中使用自定义的 icon 由于 umi 的限制,在 router.config.js 是不能直接只是用组件的,Pro 中暂时支持 使用 ant.design本身的 icon type,和传入一个 img 的 url.只需要直接在 icon 属性上配置即可,如果是个 url,Pro 会自动处理为一个 img 标签. 如果这样还不能满足需求,可以自定义 getIcon 方法. 如果你想使用 iconfont 的图标,你可以使用ant.desgin的自

  • 浅谈Vue+Ant Design form表单的一些坑

    浅谈Vue+Ant Design form表单的一些坑

    目录 设置默认值的坑 自定义 v-decorator 组件的坑 最近在用 vue + ant 写项目发现 from 组件的坑还是比较多的 设置默认值的坑 控制台报 Warning: You cannot set a form field before rendering a field associated with the value. You can use getFieldDecorator(id, options) instead v-decorator="[id, options]&q

  • Ant Design Vue 修改表格头部样式的详细代码

    在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码.首先用到的是customHeaderRow这个API,类型是一个函数 1.HTML部分 <a-table size='small' // 样式大小 :columns="columns" :data-source="data" bordered :pagination="false" // 不显示页数 :customHeaderRow="customR

  • 如何修改ant design组件自带样式

    目录 修改ant design组件自带样式 背景 需求 解决方法 Notice 更改antd 默认样式 更改ant design 默认样式 修改ant design组件自带样式 背景 Vue-CLI创建的项目 需求 把走马灯的面板指示点(如图1)改成真正的点(如图2) 解决方法 走马灯自带面板指示点类名dotsClass = "slick-dots",考虑到项目中可能多处会用到走马灯,请自行更改类名(我的项目只有一处用到,故不想改) 在src/assets/style/(这个是我用来放

  • Ant Design 组件库之步骤条实现

    Ant Design 组件库之步骤条实现

    目录 引言 1 antd 之 Steps API 2 antd 之 Steps 示例 引言 antd 组件库是基于 Ant Design 设计体系的 React UI 组件库,antd 为 Web 应用提供了丰富的基础 UI 组件,可以用于研发企业级中后台产品.这篇咱们介绍 antd 组件库之 步骤条. 1 antd 之 Steps API 步骤条 Steps 的用处是在 当任务复杂或者存在先后关系时,将其分解成一系列的步骤,从而达到简化任务的目的.其 DOM 节点为 : <Steps> &l

  • Ant Design 组件库按钮实现示例详解

    Ant Design 组件库按钮实现示例详解

    目录 1 antd 之 Button API 2 antd 之 Button 示例 1 antd 之 Button API antd 组件库是基于 Ant Design 设计体系的 React UI 组件库,antd 为 Web 应用提供了丰富的基础 UI 组件,可以用于研发企业级中后台产品.这篇咱们介绍 antd 组件库之 按钮. 按钮 Button 是一个比较基础的 UI 组件,一般在有交互的应用中都会用到. 其 DOM 节点为 <Button>...</Button>,ant

  • Android实现Ant Design 自定义表单组件

    Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法(使用起来确实很爽),这时需要自己动手封装一些表单,同时我们还要保持方法可以继续是使用. 组件的源码    https://github.com/haozhaohang/ant-design-expand-component 下面看一下如何自己封装表单组件,这是一个最基础的表单使用例子: impor

  • Ant Design中使用css切换的问题及解决

    目录 Ant Design使用css切换问题 1.绑定一个自定义属性 2.css模块化 3.Ant Design主题方案 4.css in js ant design中css样式覆盖问题 Ant Design使用css切换问题 当想通过开关来控制主题颜色时,就必须控制css的变化,现就记录使用Ant Design切换主题过程中发现的一些问题. 切换主题的方法: 1.绑定一个自定义属性 通过绑定一个自定义属性,一键改变html的整体样式.但缺点也很明显,他仅适用于原生的样式(css全部由自己定义)

  • 快速修改antd vue单个组件的默认样式

    快速修改antd vue单个组件的默认样式

    目录 一.想要修改组件的默认样式 二.类名scoped的限制 你是否会有这样的疑惑 三.使用/deep/. >>>时 Ant Design Vue地址:https://www.antdv.com/docs/vue/introduce-cn/ 刚接触Ant Design Vue的童鞋们可能会有这样的问题,不就是修改默认的组件样式吗,为什么一会生效,一会又不生效.希望看完这个文章,会给你一些收获~ 一.想要修改组件的默认样式 首先你需要知道组件是渲染在哪里的 这个组件是渲染在当前页面内部,还

  • ant design中upload组件上传大文件,显示进度条进度的实例

    Upload组件是自带上传进度,但是样式调起来很麻烦,我们要做的就是自定义一个 首先页面要引入组件 Upload, Progress uploadAttachmentsProps = { action: `/api/upload`, showUploadList: false, // 这里关闭自带的列表 beforeUpload: (info) => { /* 上传前的钩子,可以用来判断类型,和大小 if ('是否符合类型') { return false } if ('是否符合类型') { r

  • ant design vue的table取消自带分页问题

    ant design vue的table取消自带分页问题

    目录 ant design vue的table取消自带分页 题外话: ant design vue table分页 ant design vue table分页设置 ant design vue的table取消自带分页 在我们使用ant design vue的table组件的时候会发现: 组件使用如示: <a-table :columns="columns" :data-source="data" bordered></a-table> 显然

  • ant design的table组件实现全选功能以及自定义分页

    我就废话不多说了,大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.st

随机推荐