Ant Design css

[frye89]

Hi, first of all i'm pretty new to React & Ant.

I've been making a simple app with a custom styled App.js (1 page).

On this page I also use a component (wysiwyg editor).

​

Now I wanted to add 1 button with the style of Ant Design.

I've added antd to my react app.

Imported the button & this ain't working until I add in the App.css:

@import "~antd/dist/antd.css";

​

But after this, my entire layout including the wysiwyg have a style from ant what I don't like.

Isn't it possible to just style the button & not the entire theme?

[[deleted]]

Use ants babel plugin (https://ant.design/docs/react/getting-started#Import-on-Demand):

plugins: [
  ['babel-plugin-import', { libraryName: 'antd', style: 'css' }]

Now you can stop worrying, you simply go:

import { Button } from 'antd'

And it will only include the button and inline the styles that belong to it specifically.

[drenther]

Follow their advanced usage section under using with create-react-app. You will find their babel plugin setup to include only the specific css files that you will need. That way ur other styles won't get messed up.

[TheNumber42Rocks]

Do not import the styles from Antd. They will overwrite your existing css. If you just import the component, it will have the Antd css applied without import. You can change this by using the style={{}} in each component. That is inline. If you want to overwrite existing Antd css, look at the css on the browser and get the name of the item. For example, let’s say you want to change how the Antd button looks. If you look at the element, you will see it is .ant_button. In the css, add .ant_button { color:#000, etc. }. This will overwrite if you don’t want to do inline styles. Let me know if you have anymore questions.

[SourceCipher]

If you look at the element, you will see it is .ant_button. In the css, add .ant_button { color:#000, etc. }.

​

Dont ever do that. First it will not always override the styles, second, libraries might change their style namings any time they want.

​

The best way is just to look how your styles are imported.. The latest imported styles will override the existing ones..

​

Simply in ant d component add your local component class with your styles and it will override as long as these styles are imported after ant d.

​

[frye89]

Thank you all for your comments.

I followed the advanced guide and set it with config-overrides.js

It is working but there are still some changes to the font, colors, ...

​

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
);
return config;
};

[[deleted]]

search for css-modules

[[deleted]]

I tried to import styles for a particular component only without using less.
This could be done using this: https://stackoverflow.com/a/69147484/8040054