Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Change order of className to override Ant Components styles.

See original GitHub issue

What problem does this feature solve?

Today, if a put a className in Ant Component, like this:

<Header className="my-header" >

The result is:

<div class="my-header ant-layout-header">

But I expect this:

<div class="ant-layout-header my-header">

What does the proposed API look like?

Let the className received by props be placed at the end.

Issue Analytics

State:
Created 6 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

4reactions

benjycuicommented, Mar 8, 2018

What you need to care is https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

0reactions

douglasjuniorcommented, Apr 27, 2020

Just follow the Getting Started https://ant.design/docs/react/getting-started

And the Theme Customization Guide https://ant.design/docs/react/customize-theme

Top Results From Across the Web

override antd component style/className - Stack Overflow

I'm using this: https://pro.ant.design/docs/style#override-the-component-style as reference to try updating a component styling but I can't make ...

Style - Ant Design

Override the component style The imported antd component class name is not translated by CSS Modules, so the overridden class name . ant-select-selection...

How to style Ant Design components in ReactJS - YouTube

ReactJs with AntDesign. Ant Design Components Styling using style Prop, className and Overriding ant classes in ReactJS.

FAQs - styled-components

The repeated class bumps the specificity high enough to override the source order without being very tedious to write! How can I override...

How to use Ant Design with Next.js - LogRocket Blog

By doing this, we import the Ant Design component styles globally and are ... <Layout className="layout"> <Sider trigger={null} collapsible ...