search

DocSpring / craco-antd

A craco plugin to use Ant Design with create-react-app
MIT License
234 stars 49 forks source link

export customized less variables to css variables #27

Open monstasat opened 4 years ago

monstasat commented 4 years ago

Hi!

I've tried craco-antd to customize default antd theme and it works great!

However, I have a question about further customization of antd components:

I use default CRA configuration with CSS modules and do not use Less (except for configuring antd). In my app I use a Header component and I want to add a bottom border to it. I also want this border to have a color corresponding to the current theme, which is stored under @border-color-base less variable. Since default antd theme does not apply any border to Header, how can I achieve this? The perfect way for me is to set the color from a css-variable, but how can I create one? Defining plain new set of css variables with same values as in Less seems a bad idea as it breaks DRY principle. How can I translate a set of Less variables to a set of CSS variables? In other words, I want to be able to use antd color scheme without using Less in my project.

Thanks in advance for your help!

alistairjcbrown commented 4 years ago

You can use a JSON file instead of a Less file - rename your antd.customize.less to antd.customize.json (source). If you're using CSS-in-JS, that would give you a single file which you can include in your application and that craco-antd can also use for customizing the Ant Design theme. Does that solve the issue?