解决：antd4.0版本自定义主题样式不生效问题

最新推荐文章于 2024-07-17 15:08:45 发布

HL477

最新推荐文章于 2024-07-17 15:08:45 发布

阅读量1.4k

点赞数

文章标签： react

本文链接：https://blog.csdn.net/HL477/article/details/122869098

版权

本文介绍了由于less-loader版本过高引发的错误，并提供了具体的解决方案，即降级到版本5.0.0。通过执行`npm install less-loader@5.0.0`或`yarn add less-loader@5.0.0`，可以有效地解决该问题。

摘要由CSDN通过智能技术生成

原因：less-loader 版本太高了
解决：npm i less-loader@5.0.0 或 yarn add less-loader@5.0.0

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HL477

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

antd4.0 实现主题自定义和按需引入踩坑

qq_39494001的博客

04-14

1050

这里写自定义目录标题1.安装craco ，craco-less和babel-plugin-import2.创建craco.config.js 1.安装craco ，craco-less和babel-plugin-import 见 antd4.x 官网，以下截自官网：create-react-app 的默认配置进行自定义，这里我们使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案）。现在我们安装 craco 并修改 package.json 里的 scripts 属性。

【antd】antd 4.X Select组件样式覆盖失效

all_might1的博客

12-24

1591

一、Select组件覆盖对应名称变更 antd从3.x升级到4.x之后，某些组件因为版本升级后原有的样式类名进行了改动。在涉及到样式覆盖重写的情况下，改动样式类名的组件需要根据原有的样式，对当前版本组件的样式改写 Select组件类名就发生了变化，对应名称从 ant-select-selection 变更为 ant-select-selector 二、覆盖方式 antd从3.x升级到4.x后，想要覆...

参与评论您还未登录，请先登录后发表或查看评论

webpack按需引入antd4x组件，解决样式不生效问题

m0_64601465的博客

07-15

199

如果你用的是vite构建的话，使用官方文档的写法，就可以按需引入组件：https://www.antdv.com/docs/vue/introduce-cn，在官方文档中。1、首先通过bable按需引入代码。在babel.config.js文件，没有的话需要创建。2、在vue.config.js中，使用。然后是vue.config.js配置。

umi 框架引入的 antd 库样式没有生效

hzxOnlineOk的博客

10-15

7087

今天，想做一下umi的简单案例，熟悉一下umi框架当我下载了umi框架并且npm安装antd包，使用Form表单时，发现antd组件样式不生效，why？由于对umi不够了解，排查了config，还自己写了.babelrc，发现都不其效果最后，我仔细的看了一下.umirc文件，发现了如下配置项： // ref: https://umijs.org/config/ expor...

Antd Design的ConfigProvider全局化配置无效问题

热门推荐

前端一线搬运工的博客

04-14

1万+

如果是配置国际化问题, 官网和百度有很多解决办法, 可以关闭了. 如果是其他配置无效,那么请继续看. 首先检查你的antd版本, 每个版本支持的配置都不一样, 越高版本支持越多. 如果你遇到配置无效, 一定要检查你现在的antd包的版本和你现在看的官网的版本文档, 请对应做配置. ...

关于antdesign-vue的layout组件样式失效问题（#components-layout-demo-custom-trigger）

坏蛋阿土的博客

07-08

1095

使用antdesign vue 中的layout作为主要布局，logo没有了，而且此时也无法更改样式。无论怎么修改都不会对页面产生影响。正常引入后，跟期望的样子不一样。

cake-ui-new：antd 4.0二次封装ui库

02-18

根据antd 4.0二次开发的前端UI组件库，文档地址： : webpack.config.js 作用是通过npm start运行本地开发时的一些配置在配置中可以通过resolve.alias指定npm包名 rollup.config.js说明（暂时未用）作用是源自组件...

antd-theme-editor：自定义和预览ant设计主题和CSS样式覆盖

02-03

蚂蚁设计主题编辑器 Boilerplate将组件渲染到，因此您可以轻松地编辑主题前提条件安装所需的系统依赖项克隆存储库 git clone https://github.com/minheq/antd-theme-editor.git 安装项目的程序包依赖项 yarn ......

starter-antd-admin-crud-auth-mern:Starter Antd 4.0 Admin App Mern(Node.js React Redux Ant Design) Crud & Auth , Dashboard

08-03

入门 Antd Admin (Crud & auth) Mern App (Express.js / React / Redux / MongoDB) 为构建的应用程序 CRM Starter Mern Antd 管理应用程序我基于 mern 堆栈（Express.js/MongoDb/React/Redux/AntD）构建了 Starter...

antd4.0踩坑

HL477的博客

02-11

853

搜索框内小图标引入与使用（3.0版本Icon已弃用） import { Form, Input, Button } from 'antd'; import { UserOutlined, LockOutlined } from '@ant-design/icons'; <Form> <Form.Item> <Input prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.5)' }} />} p.

Ant Design不能修改样式，添加的className没有生效？看这里

和合河禾何

10-17

8994

我是用了antd的Table控件，想为table设置单双行不同颜色，于是使用了rowClassName <Table pagination={dataPagination} columns={this.dataTableColumns} dataSource={this.dataSource} locale={{ emptyText: <NoContent/>...

Antd样式加载不出来

weixin_40866459的博客

11-03

1681

解决方案： https://ant.design/docs/react/use-with-create-react-app-cn#使用-babel-plugin-import 修改 src/App.css，在文件顶部引入 antd/dist/antd.css。 @import '~antd/dist/antd.css';

Ant Design radio组件样式修改

qq_39111074的博客

04-28

3052

Ant Design radio组件样式修改

react解决引入antd以后样式不生效问题，以及自定义样式主题

Aspirin's Nest

03-02

6617

在react项目中引入antd依赖以后发现样式没有生效。可能是引入了按需打包依赖导致的。但是实际项目中确实需要按需打包。所以我们必须解决这个问题 # 安装antd npm install antd # 下载这些是为了按需打包用的 npm install react-app-rewired customize-cra babel-plugin-import 解决按需打包过程中样式不生效问题方式一最简单的方式是在项目入口js，即index.js文件中引入下面一句话，但是不推荐，因为这样是全局引入，

解决vue3 vite ts项目使用antdv自定义主题没有效果的问题

renovateF5的博客

04-27

1679

首先在main.ts文件中引入下面的文件之后在合适的位置写下下面的代码，这里的代码来自，直接复制过来的})但是这种有的时候会不起作用，检查过后发现，切换主题之后--ant-primary-color这些颜色都改变了，但是又被替代了，是自动导入插件的原因，在vite.config.ts中的自动导入加入importStyle: false即可// ui库解析器，也可以自定义})

react项目中修改ant design 主题色

weixin_45892086的博客

05-26

1145

react项目中修改ant design 主题色 1、安装less和less-loader npm i less --save 注意：less-loader 版本大于等于5.0.0 npm i less-loader --save 2、在webpack.config.dev.js文件中添加如下代码 { test: /\.less$/, use: [{ loader: "style-loader" // creates st

ANTD3更改less全局主题样式后message弹窗不生效 Ant Design 3 组件功能失效 custom-message

最新发布

zhimooo的博客

07-17

166

最后，我在代码里全局搜索custom，不搜不知道，一搜才发现，原来是在全局配置里不小心粘贴了网友的代码。遇事不急，先分析原因，这个在我更改全局样式之前还能生效，那么就是在我刚刚的操作中导致的这个问题。起因是想要更改全局样式的时候从网上抄拉了一大堆，然后发现message弹窗样式不生效了。这还要说一下小技巧，打开控制台，如图红框内的暂停按钮（也可以按快捷键）去掉这一行（prefixCls: "custom"），保存，大功告成！就能使网页暂停，方便开发调试，这在日常调试中也是比较实用的功能。

ant design pro 暗黑模式失效解决

老汪的技术人生

05-14

4775

ant design pro 暗黑模式失效解决方案

antd 4.0版本 Form dependencies 自动触发更新实例

06-06

在 Ant Design 4.0 版本中，Form 组件的 getFieldDecorator API 已经被废弃，取而代之的是 useForm Hook，它提供了一种新的方式来实现表单项之间的依赖关系。具体来说，您可以在 useForm Hook 中使用 watch 函数来监听表单项的值，并在表单项值发生变化时触发相应的回调函数。例如： ```jsx import React from "react"; import { useForm } from "antd/lib/form/Form"; import { Input } from "antd"; function App() { const [form] = useForm(); const handleAChange = (value) => { if (value === form.getFieldValue("b")) { form.setFields([ { name: "a", errors: ["A 和 B 的值不能相同"], }, ]); } else { form.setFieldsValue({ a: value }); form.setFields([ { name: "a", errors: [], }, ]); } }; const handleBChange = (value) => { if (value === form.getFieldValue("a")) { form.setFields([ { name: "b", errors: ["A 和 B 的值不能相同"], }, ]); } else { form.setFieldsValue({ b: value }); form.setFields([ { name: "b", errors: [], }, ]); } }; const watchA = form.watch("a"); const watchB = form.watch("b"); React.useEffect(() => { if (watchA !== undefined && watchB !== undefined) { if (watchA === watchB) { handleAChange(watchA); } } }, [watchA, watchB]); React.useEffect(() => { if (watchA !== undefined && watchB !== undefined) { if (watchA === watchB) { handleBChange(watchB); } } }, [watchA, watchB]); return ( <form> <Input name="a" onChange={(e) => form.setFieldsValue({ a: e.target.value })} /> <Input name="b" onChange={(e) => form.setFieldsValue({ b: e.target.value })} /> </form> ); } ``` 在上面的例子中，我们使用了 useForm Hook 来创建一个表单实例，并分别定义了 handleAChange 和 handleBChange 两个回调函数，用于处理表单项 A 和 B 的值变化。然后，我们使用 watch 函数来监听 A 和 B 的值，并在值发生变化时触发相应的回调函数。在回调函数中，我们使用 setFieldsValue 函数来更新表单项的值，并使用 setFields 函数来更新表单项的错误信息。最后，我们在 useEffect Hook 中监听 watchA 和 watchB 的变化，并调用相应的回调函数来处理依赖关系。需要注意的是，由于 watch 函数只能监听具有 name 属性的表单项，因此我们需要在 Input 组件中添加 name 属性来使其能够被 watch 函数监听。此外，由于 useForm Hook 返回的表单实例是一个 ref 对象，因此我们需要使用 form.getFieldValue 和 form.setFieldsValue 函数来获取和更新表单项的值。