antd

Use of Ant Design Icons While Offline

北慕城南 提交于 2021-01-29 12:52:07
问题 I am working on a reactJS application that uses ant design for the UI. Recently we released this application to production where the computers are pretty locked down. This application is an intranet application and these computers have no internet access. So, because of that, the ant design icons on the modals were showing up as empty boxes. I did some digging and saw that the icons are using CSS classes. For example, this is the CSS class for the red error "X" on the error modal: .anticon

Antd multiselect selected Item color or custom style

拟墨画扇 提交于 2021-01-29 11:03:14
问题 I am using this multi select of antd Antd multiselect It is working perfectly fine bt i want to make it like that Multiselect Design Each selected item have specific color.Is this possible with antd multiselect?Antd provides some props like labelInValue but i am confused how to use they have not provided enough detail. 回答1: You can modify the color of the selected items by using css or less variables link to antd instructions for less variables. To use css, open the node_modules folder, find

AntD - how to use dark theme for a single component?

Deadly 提交于 2021-01-29 10:18:42
问题 So the component lib has a dark theme. I would like to use dark style only for a single component, say a Popover . All the rest sd remain default. Is there a way to achieve that? 回答1: you could use less reference import feature for theming single component. Sudo code would be something like @import (reference) "@ant-design/dark-theme" .my-popover { &:extend(@popover-prefix-cls all); } you can find the class name @popover-prefix-cls by going into individual components styles file and checking

How to customize antd theme on runtime?

风流意气都作罢 提交于 2021-01-28 09:05:09
问题 I have been working with antd for quite sometime now. So far in my react app I have customized antd theme in webpack configuration and have updated default less variables. Or If Im using create react app, in that case I customized the theme by modifyling variables in config-overrides.js . But Now I have a feature in my app to have multiple themes and the user could choose the theme of the application on runtime i-e on clicking a button I want to change the theme of the entire application. How

Antd Treenode title and height css setting

ε祈祈猫儿з 提交于 2021-01-28 05:32:16
问题 I am using Antd v4.2.4 Tree (example: virtual scroll) from the link. I woulld like to use the virtual Scroll which can be used by setting "height" prop of the Tree. All is fine till here as in the example. I would like to apply some css to the scrollbar like both overflowX and Y should be enabled on hover in the container I would like have the Tree node show in only single line when the title is really big and not wrap it, if I use overflowX css, it doesn't work. codesandbox Update1: I see

Ant Design Form - onAfterChange handler

冷暖自知 提交于 2021-01-28 02:10:38
问题 I've created a form with antd that outputs the form values to the console whenever a field has changed by using the onValuesChange function on a Form . My issue is that Slider components call this onValuesChange function whilst dragging the slider and I'd like it to instead be at onmouseup . I'm aware that the onAfterChange event of a slider only fires onmouseup but I'm not sure how to make onValuesChange use onAfterChange instead of onChange . Can anyone offer advice on this? import React, {

React Antd showing multiple modal on array.map

痴心易碎 提交于 2021-01-27 23:16:49
问题 When clicking the update button the modal pops twice, the first one shows the correct item.id but the second one is the last value on the list. any help is appreciated. tried adding {this.props.child} inside the modal tag but it doesn't work. any help would be appreciated. this.state = { ModalText: 'Content of the modal', visible: false, currentId : 0, confirmLoading: false, } } showModal = () => { this.setState({ visible: true, }); } handleOk = () => { this.setState({ ModalText: 'The modal

React Antd showing multiple modal on array.map

怎甘沉沦 提交于 2021-01-27 22:05:26
问题 When clicking the update button the modal pops twice, the first one shows the correct item.id but the second one is the last value on the list. any help is appreciated. tried adding {this.props.child} inside the modal tag but it doesn't work. any help would be appreciated. this.state = { ModalText: 'Content of the modal', visible: false, currentId : 0, confirmLoading: false, } } showModal = () => { this.setState({ visible: true, }); } handleOk = () => { this.setState({ ModalText: 'The modal

Update antd form if initialValue is changed

白昼怎懂夜的黑 提交于 2021-01-27 15:03:55
问题 I'm passing currentUser data from my Redux-saga into antd form, Name, email, phone number, introduction are passed to the form as initialvalue, what i want to do is i want to submit the form as a put request to db if the initialvalue has been changed.. here is my code import React from 'react'; import {createStructuredSelector} from 'reselect'; import { connect } from 'react-redux'; import { selectCurrentUser } from '../../redux/user/user.selector'; import { Form, Input, Button } from 'antd';

How to build a component library using TypeScript, Ant Design and Rollup

谁都会走 提交于 2021-01-24 12:26:55
问题 I'm trying to create an example boilerplate for a library of reusable components in TypeScript, using Ant Design for UI elements and Rollup for bundling. The Ant Design documentation although useful, doesn't give specific details for configuring Rollup and I've not had any luck finding an example using the same technology stack. Using information from various online sources I've put together an outline boilerplate and published it to the following GitHub repository However, the build output