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

css reactjs antd
joe.hart picture joe.hart · Mar 27, 2018 · Viewed 24k times · Source

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.

Answer

Jesper We picture Jesper We · Mar 27, 2018

<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 can't do it through the style attribute, you need to do it in CSS.

The proper place to attach a background color is

.ant-select-selection {
  background-color: green;
}

This will make all your selects green. Give them individual classNames if you want different colors for different selects.

Related questions

How to customize Ant.design styles

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 } = …

Read More
In Ant Design, how can we center <Icon> vertically in <Row>?

Please see my React code example: import React from 'react'; import { Row, Col, Icon } from 'antd'; const MyRow = () => ( <Row type="flex" align="middle"> <Col md={10}>Trouble is a friend</Col> <Col md={10}&…

Read More
CSS for colouring one row of antd table in react

This is the CSS for the antd style I'm using style.css .ant-table-tbody > tr > td, .ant-table-thead > tr > th { padding:4px; } tr:nth-child(odd){ background: #f1e6ff; } tr:nth-child(even){ background: white; } thead[class*="ant-table-thead"] th{ …

Read More