How to import Ant Design css styles in GlobalStyles of styled-components.?

Question

How i can make an import of antd.css in styled-components? instead of App.css

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

The whole purpose is, i want my GlobalStyles from styled-components by default to have all Ant Design styles.

And when i will use elements from AntD it will have all default classes on it.

Answer 1

You shouldn't.

NOTE: At this time we recommend not using @import inside of createGlobalStyle. We're working on better behavior for this functionality but it just doesn't really work at the moment and it's better if you just embed these imports in your HTML index file, etc.

Altought you can try:

import { createGlobalStyle, css } from 'styled-components';

const antdCss = css`
  ${import('antd/dist/antd.css')}
`;

const GlobalStyle = createGlobalStyle`
  ${antdCss}
`;

export default GlobalStyle;