How to customize the look of ant design components? about react-awesome-query-builder

[johannsl]

I'm not sure if this is the best way to solve this issue.. But you could override the ant .css directly.
For example:

.ant-btn-primary {
  background-color: #000080;
  border-color: #000080;
}

There are quite a few of these ant .css classes in use that you could override.
Some of them are:

• .group
• .ant-btn-primary
• .ant-btn-primary:focus
• .ant-btn-primary:hover
• .ant-btn:focus
• .ant-btn:hover
• .ant-btn-danger:hover

To find the .css classes that you want to change, you could use Chrome Dev Tools to inspect the your website (or the demo website). Then, if you can locate the components you want to change, you can see which .css classes they are using in the Dev Tools Styles area.

[Jekin19]

Thanks @johannsl

I tried that approach but its little tedious as you suggested.
If just like choosing widgets in demo, all antd components could be made available for overriding

// E.g. in Demo
import { Widgets, Operators } from 'react-awesome-query-builder';

const {
TextWidget,
NumberWidget,
SliderWidget,
RangeWidget,
SelectWidget,
MultiSelectWidget,
DateWidget,
BooleanWidget,
TimeWidget,
DateTimeWidget,
ValueFieldWidget
} = Widgets;

[ukrbublik]

You can use customProps (see in config) and pass className or other props of antd