csssassantdcss-modulesreact-css-modules

How do I override the styles in ant-design 5?

I'm using React (create-react-app), ant design 5.3.0 and modular scss.

When using embedded components, their styles override mine, because the component creates a wrapper and my styles are hung from the upstream wrapper and the downstream element creates the ant design itself.

To override them in scss, I figured out that I need to declare an inline class inside my class which generates ant design. For example, for Typography it will form .ant-typography. There's one BUT: if you don't use modular scss (don't write to files like head.module.css), you're fine. And if you write in modular scss files, it doesn't override.

Head.module.scss index.js importing module scss what render index.js with module scss
index.js importing plain scss what render index.js with plain scss (sorry: i dont have enough reputation to post images yet because of novice contributor)

I think it has something to do with kebab-case notation. I tried changing the notation to camelCase in the model files, but that didn't help either. Can you tell me how to solve the issue?

Solution

  • Try using

    :global(.className) {
    // Set CSS Properties
}

    in the modular scss file

    For example:

    :global(.swiper-pagination) {
    width: 100%;
}

    Inspect the page to find the classname you need to override. Here's a link about ':global': What does :global (colon global) do?