antd

How to customize Ant.design styles

由 那年仲夏 提交于 2019-12-06 01:31:14
问题 Who knows how to customize Ant.design styles in proper way? For example, I want to change the default backgroundColor and height of Header section: import React, { Component } from 'react'; import { Form, Layout } from 'antd'; const { Header, Footer, Sider, Content } = Layout; export default class Login extends Component { render () { return ( <div> <Layout> <Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header> <Layout> <Content>main content</Content> </Layout> <Footer

How to change the style of a Ant-Design 'Select' component?

由 醉酒当歌 提交于 2019-12-05 23:31:43
问题 Suppose I want to change the standard white background color of the Select component to green. My try... <Select style={{ backgroundColor: 'green' }}> // Options... </Select> ...didn't do it. Can someone point me in the right direction? [EDIT] I ended up using the suggested approach from Jesper We. Overwriting the color for all selections... .ant-select-selection { background-color: transparent; } ...then I could style the Select components individually. 回答1: <Select> renders a whole set of

How to change the style of a Ant-Design 'Select' component?

由 ＊爱你＆永不变心＊ 提交于 2019-12-04 06:11:08
Suppose I want to change the standard white background color of the Select component to green. My try... <Select style={{ backgroundColor: 'green' }}> // Options... </Select> ...didn't do it. Can someone point me in the right direction? [EDIT] I ended up using the suggested approach from Jesper We . Overwriting the color for all selections... .ant-select-selection { background-color: transparent; } ...then I could style the Select components individually. <Select> renders a whole set of <div> s, you need to take a look at the resulting HTML element tree to understand what you are doing. You

How to create a questionnaire type form using Ant Design?

由 核能气质少年 提交于 2019-12-02 03:51:28
问题 Ant Design provides a Dynamic Form Item, by using that, I can add and remove multiple fields. But now I want do nesting in that, i.e., I want to create a questionnaire like form in which I want to add multiple questions and their respective answers. Currently, when I am adding questions, its working correct but when I am adding answer to one question, its also adding to the all questions. The functions of adding and removing questions and answers are as given below: remove = k => { const {

Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key

由 放肆的年华 提交于 2019-12-01 16:43:14
问题 I am rendering a table with ant design and it works fine, but there is a warning in the console: Each record in table should have a unique key prop,or set rowKey to an unique primary key My code is as follows: import React, { Component } from 'react'; import { Table} from 'antd'; import { adalApiFetch } from '../../adalConfig'; class ListTenants extends Component { constructor(props) { super(props); this.state = { data: [] }; } fetchData = () => { adalApiFetch(fetch, "/Tenant", {}) .then

react.js antd carousel with arrows

由 喜夏-厌秋 提交于 2019-12-01 05:05:57
问题 I am looking at using the antd Caroseul, but I've not seen an example that creates a prev/next or pause button. const { Carousel } = antd; ReactDOM.render( <Carousel autoplay> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div> </Carousel> , document.getElementById('app')); 回答1: import React, { Component } from "react"; import { Carousel, Icon } from "antd"; export default class CarouselComponent extends Component { constructor(props) { super(props); this

ant design - huge imports

由 空扰寡人 提交于 2019-11-30 08:22:29
I'm using and design library for my react application. And I've faced with huge imports, that hurts my bundle (currently 1.1 mb in minified version because of ant-design lib). How can I differently import antd components through all my app? UPDATE: Seems antd has some huge or non optimized modules. Here the thing - only difference is import Datepicker module, and.. boom! + almost 2MB (in dev bundle ofc.) At the moment, huge part of antd dist is svg icons. There is no official way to deal with it yet ( check the issue on github ). But a workaround exists. Adapt webpack to resolve icons

Ant Design antd vs antd-mobile for non-native mobile web development

由 ぐ巨炮叔叔 提交于 2019-11-30 08:08:56
问题 Reading about Ant Design I am getting confused about which library to use for mobile web development. There are two libraries, antd and antd-mobile . While it is clear that antd-mobile supports react-native on iOS and Android, it is unclear which one is best suited for plain mobile (non-native / SPA) web development. Reading the antd introduction you see statements like "Ant Design which is specially created for internal desktop applications, ...", while reading the antd-mobile introduction

Ant Design antd vs antd-mobile for non-native mobile web development

由 自古美人都是妖i 提交于 2019-11-29 06:03:59
Reading about Ant Design I am getting confused about which library to use for mobile web development. There are two libraries, antd and antd-mobile . While it is clear that antd-mobile supports react-native on iOS and Android, it is unclear which one is best suited for plain mobile (non-native / SPA) web development. Reading the antd introduction you see statements like "Ant Design which is specially created for internal desktop applications, ...", while reading the antd-mobile introduction you will see "Support Web / iOS / Android platform (Based on React Native)" From this I would think that

ant design - huge imports

由 随声附和 提交于 2019-11-29 01:55:30
问题 I'm using and design library for my react application. And I've faced with huge imports, that hurts my bundle (currently 1.1 mb in minified version because of ant-design lib). How can I differently import antd components through all my app? UPDATE: Seems antd has some huge or non optimized modules. Here the thing - only difference is import Datepicker module, and.. boom! + almost 2MB (in dev bundle ofc.) 回答1: At the moment, huge part of antd dist is svg icons. There is no official way to deal
订阅 antd