How to Customize Ant.Design Styles

How to customize Ant.design styles

Antd has externized most of their styling variable in LESS variables

as you can see in

https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

To be able to overwrite those variables you need to use modifyVar function from LESS

you can find more about theming here

So to your specific question, @layout-header-background does the job

Ant Design Styles

If you need it to change the styles then there is a way to do it without knowing classNames.. https://ant.design/docs/react/customize-theme check this out. you can change default style using less preprocessor & craco... or if you really want classNames list than you have to download any frontend project that is made in antdesign. I hope there you can find files with all classNames if it is well developed.

How to customize Component of Ant Design?

I found a module can help me easy to customize Ant Design, thank guys!
Its craco-antd

How to change styles in Modal of Antd?

Add:

.modalStyle2 .ant-modal-header {
  border-radius: 20px 20px 0 0;
}

or

.modalStyle .ant-modal-header {
  border-radius: 20px 20px 0 0;
}

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

<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.

how to customize / override antd styles?

You need to style the Form.Item component, for example with inline-style:

// The current form item is margin 15px top.
<Form.Item style={{ marginBottom: "0px" }}>
  <Input />
</Form.Item>

Or the entire Form by overriding the css-class, for example with CSS-in-JS:

// Apply style to all form
const StyledForm = styled(Form)`
  .ant-form-item {
    margin-bottom: 0px;
  }
`;

Demo:

Same can be achieved with .css file and importing it:

:global .ant-form-item {
    margin-bottom: 0;
}

---

Related Topics