What is this css-dev-only class?

[X-lem]

Just upgraded my site locally to antd v5 and I'm seeing css-dev-only-do-not-override-1siqap5 on basically every antd component. Is this just a temp thing? Styles for when doing development? Something else?

They're adding a lot of styles that I don't like (they seem to be overriding a lot of styles v4.x didn't touch). I want to change a lot of these back. Also not the cleanest looking class either.

Is there a way to remove these styles/classes?

[zombieJ]

This prefix css-dev-only-do-not-override- will trans to prefix css- in prod. It's just notice that developer not override style with this className.

[HStokbro]

I agree. This class makes it impossible/very hard to style elements inside ant components

[sebaseek]

I think we should be given a proper answer, upgrading to v5 was not a difficult task so props to the team for that but this issue is capping the entire migration, every component or almost all of them are being affected making styles look "not desirable"

[abenhamdine]

I agree. This class makes it impossible/very hard to style elements inside ant components

Why ? Why an additional css class would prevent you from styling an element ?

[sebaseek]

@abenhamdine it's overriding styles from ant v.4 making a lot of components break

[zombieJ]

Hash css is wrap with :where selector which do not take css priority. And pls feel free to create issue if meet style break case.

[terminalqo]

Any idea with this warning ?

[sebaseek]

I have the same issue, what we should do with this ? Ant v5 It's adding this class on all components and breaking some of them

[nir1000]

I have same issue, it impact the primary color, font-family and more!

[tanabalu]

The real cause of the abnormal font size is that antd5 has removed the global default style which defined in antd4, and we only need to manually add the default style back

html,
body {
  // NOTE: global style in antd4
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  box-sizing: border-box;
}

[tanabalu]

The real cause of the abnormal font size is that antd5 has removed the global default style which defined in antd4, and we only need to manually add the default style back

html,
body {
  // NOTE: global style in antd4
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  box-sizing: border-box;
}

[TarekAlQaddy]

I'm having the same mismatch issue using Nextjs@v13 with antd@v5

[mitya-kocherga]

i guess it connected with
ant-design/cssinjs#52

[fabioxister]

Same issue, i don't understand how css-dev-only-do-not-override works

[vorlov]

same, pls remove it

[cubohbrandon]

The reason for the css class causing problem is its how the css-in-js is attributed to the styling of the project. The order of priority for inline styling is higher than any stylesheet. This results in having to override with !important or more specific styling.

The docs for the V4 to V5 transition are currently lacking on how to properly implement the styling change. After some serious digging I was able to find this resource: https://ant-design.github.io/antd-token-previewer/~demos/docs-theme-editor-simple

Its an interactive editor to help you with the themeing of the V5 styles. However, be warned its very buggy and you will still need some overrides. Some of the tokens dont map properly to the components yet so its been a very long process to get my theme transported from V4->V5.

It will help though.

[sebaseek]

I see this as a workaround, not the correct solution, it should not be overriding classes as it is now, it's very code agressive and they should modify this, it's the only thing prohibiting migration to ant v.5

[cubohbrandon]

Yes, its a workaround that gets V5 into your hands today - not tomorrow. It actually worked well enough that we are now on V5 in production. Yes, there are some overrrides but those can be removed with the last of the bugs are ironed out.

[zfben]

It breaks my v4 project's style :(

[sebaseek]

This dev-only property should be erased or make it less agressive on css styles

[abenhamdine]

It's not a dev only property, the name is different in dev and production modes.
This unique id class name is required in order to css-in-js to apply styles on elements.
You should edit css-in-js tokens to customize styles in antd v5

This is a breaking change documented in https://ant.design/docs/react/migration-v5
The explanations to use css-in-js pattern are in https://ant.design/docs/react/customize-theme but indeed they could be improved.

Currently there are also bugs which prevents to properly style elements, see :
#38956
#38933

I would strongly recommend to not upgrade to antd5 while it's not stable, especially regarding the new design system.

[sebaseek]

So they imply to modify every class they have broken with a workaround? Why this is needed afterwards? make an option to disable it

[abenhamdine]

So they imply to modify every class they have broken with a workaround? Why this is needed afterwards? make an option to disable it

You can't, it's the very principle of css-in-js pattern

[sebaseek]

Still don't think this is a proper solution

[zhangyuang]

same issue zhangyuang/ssr#251

[sebaseek]

Can some mantainer please say something? It's a ghost town of people without even knowing what to do and without proper documentation

[abenhamdine]

Please everyone, ant design is open source, maintainers don't owe you anything.
It's not mandatory to upgrade to antdesign 5 : antd 4 is still maintained and will be maintained in 2023.
Let the antd team quietly fix bugs and improve docs.

[sebaseek]

Sorry but I don't share the same opinion as you, if you release a v5 it should be stable and with proper documentation, unless you deploy an alpha / beta version of it, it is not an excuse

[abenhamdine]

It's not an opinion, it's a fact.

if you release a v5 it should be stable and with proper documentation

should imply a liability, this is not the case here : you don't pay for antdesign, it's free and opensource.
If you don't like the docs, send a PR to improve them or pick another components library.

[nevestuan]

My project's styles have been broken a lot in ant v5. We have been using styled-component to override some Ant CSS. And the css-dev-only now overrides our styles as well. If we want to override it, we need to make our styled-component have !important CSS rules, which makes them very difficult to customize in the future. I had to modify some components to have double !important to get back our styles. We really hope that this issue could be addressed soon.

[abenhamdine]

You have to wait for every token component to be available in antv5 next versions in order to override styles.
Meanwhile, you can stay on antd v4 which is still maintained.

[sebaseek]

Then why release v5? Release a Beta then... again, this is unacceptable to be in a release, I don't know why you defend this constantly, maybe because you are a contributor?

[abenhamdine]

Documentation has been improved in the last days, but is still in progress :
https://ant.design/docs/react/customize-theme

[GorkemSinirlioglu]

@sebaseek I don't see what's the problem here. Just commit your migration work process in a separate branch, and continue operating on v4. Once there is a stable version, you can still continue migrating.

Totally agree with the point of view of @abenhamdine

@sebaseek check again the formulation inside MIT license.

[sdvcrx]

How to remove css-dev-only-do-not-override- during snapshot unittests ?

[mitya-kocherga]

i did it like in my comment
#38753 (comment)

[mitya-kocherga]

I found the hacky solution

You need to pass to ConfigProvider component theme with "hashed: false"

like this:
<ConfigProvider theme={{ hashed: false }}> ..<your app here>.. </ConfigProvider>

[sewonist]

<ConfigProvider theme={{ hashed: false }}> ..<your app here>.. </ConfigProvider>

It's works for me. Thanks!

[bombillazo]

Not working for me :/ Im using Antd v5 and Pro-Components

[ankhaaa1]

omg, you saved my day. thank you ;)
https://ant.design/components/config-provider
Why wasn't it mentioned it? fuck.

[khangsk]

Nice. Thanks bro!

[tangyongjin]

hased:false saved me ! thank you !

[abenhamdine]

see related post https://ant.design/docs/blog/css-in-js

[MadCcc]

Dynamic hash in dev mode has been replaced with stable one: #39069

[mleister97]

[top1st]

You can use theme={{components: {
Layout: {
colorBgHeader: "red"
}
}}

[nerdess]

To be honest I am shocked how antd behaves in 5.x. The styling is impossible to override (with the exception of some of the stuff that is inside the theme.json). Things are documented nowhere, all is just odd. Very frustrating!

[zombieJ]

#40221

[cmprojectcm]

so do we have any update on this issue. I have the same issue too

[cmprojectcm]

Should we raise it as an issue?

[arvinxx]

css-dev-only class won't avoid overriding style. you can try with this demo. You can still override style as same as v4.

Actually I'm really strange that it's so easy to test it but most of you just say it can't override styles bal bal something like that.

---

the css-dev-only-hash actually usage is that avoid style conflict in application with mutliple instances of antd ,like micro-frontend.

for example, if two mirco app have different version of antd v5, the hash of these antd instance will be different. So A app's antd style won't affect B app's antd style due to they have different hash classes.

If we want to use hash class to scope antd style, we all know that it will rise the priority and make it difficult to override. But thanks to :where selector , it has zero priority. so you can still override style as easy as before.

[Jaimeen24]

@arvinxx as you can see in the screenshot the class ant-typography is overridden by the same class (ant-typography) but with :where selector. I have set the font-family ("IBM Plex Sans") in theme token, but it gets overridden, and the only difference between selectors is this generic selector (:where(...)).

@daryazata did you get any solution for this???

[c0d3m3nt0r]

@arvinxx, this is indeed super easy to test, please have a look at my comment below, in response to @bombillazo, I think there is something definitely affecting the final results by adding that term, it is not a fact of being able to override css or not, it is about something actually breaking your existing code, that gets fixed if not present at all, so, it is definitely having a side effect.

[arvinxx]

Get the overwrite problem if add hashPriority="high" to StyleProvider . see demo. so how to do ?

@ivanzhu wrap css with #container. in production maybe you can use postcss to wrapper all css with #conatienr . https://codesandbox.io/s/an-niu-lei-xing-antd-5-1-6-forked-d18cym?file=/index.css

[arvinxx]

@arvinxx as you can see in the screenshot the class ant-typography is overridden by the same class (ant-typography) but with :where selector. I have set the font-family ("IBM Plex Sans") in theme token, but it gets overridden, and the only difference between selectors is this generic selector (:where(...)).

@daryazata any codesandbox demo ?

[arvinxx]

@arvinxx, this is indeed super easy to test, please have a look at my comment below, in response to @bombillazo, I think there is something definitely affecting the final results by adding that term, it is not a fact of being able to override css or not, it is about something actually breaking your existing code, that gets fixed if not present at all, so, it is definitely having a side effect.

@c0d3m3nt0r maybe you can raise an issue to explain your problem. I don't get what's your point about problem of hash-prefix

[bombillazo]

Can this class be turned off? it is causing me problems with SSR as it will yield different classes on the Server vs the Client:

[zombieJ]

Client & Server will be the same classname. If hydrate with diff cls warning, it must be something wrong to un-align in client or server side render.

[c0d3m3nt0r]

That prefix ruins the entire css, if you want to confirm, please, verify with that -dev-only-do-not-override in CSS class names, it breaks the whole thing, now, if you go to the javascript console and remove that term from the class names, you will see it all magically gets fixed:

[].slice.call(document.querySelectorAll('[class*=css-dev]')).forEach(el => {
    el.className = el.className.split(' ').map(cls => cls.replace(/-dev-only-do-not-override/, '')).join(' ')
})

This is only happening on server side rendering, while in client side rendering, after moving to another route in the application, when the page gets rendered back again, the offending term gets removed, and styles render correctly... this is quite inconsistent, and also, not documented.

[c0d3m3nt0r]

So, if you have NODE_ENV set with other than production, the above will take place, otherwise the content will be rendered as expected... but this is because -dev-only-do-not-override term is not included that way, otherwise the issue is there, and pretty confusing, I have wasted a lot of time trying to determine what the issue was.

Ref Code:
node_modules/@ant-design/cssinjs/lib/hooks/useCacheToken.js:var hashPrefix = process.env.NODE_ENV !== 'production' ? 'css-dev-only-do-not-override' : 'css';

I have tried with the config provider and setting hashed=false but that creates another unexpected behavior, like mixing theme algorithms... that is super weird, I have seen css overrides coming from the dark theme over the default one... ¯\_(ツ)_/¯

[Junting-Liu]

Hi @c0d3m3nt0r , do you get the solutions to fix this issue?
I used NODE_ENV=test in nextjs project, and met same issue 😭

[doraemonxxx]

This broke the Styles of my current project, how sad

[rahulmanas]

I commented this line in my Next js app. And it worked for me.

`
MyDocument.getInitialProps = async (ctx) => {
const cache = createCache();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
(

<App {...props} />

),
});

const initialProps = await Document.getInitialProps(ctx);
const style = extractStyle(cache, true);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style dangerouslySetInnerHTML={{ __html: style }} />
</>
),
};
};
`

[avtpas]

check this out
'next' button is unable to click, because 'pointer-events:none' was added by this freaky

https://codesandbox.io/p/sandbox/brave-babbage-7zygmj

[YongzeYao]

why are these styles added? how do I remove them? They just make things worse

[dmahno]

I wrote a special function which remove all classes for React app
but it's a crutch. It's not a proper solution

import {useEffect, ComponentType, ReactElement} from 'react';

export function withCleanUpClasses<T extends object>(WrappedComponent: ComponentType<T>): ComponentType<T> {
  const WrappedWithCleanup: ComponentType<T> = (props: T): ReactElement => {
    useEffect(() => {
      const removeMatchingClasses = (): void => {
        const allElements = document.querySelectorAll('*');
        allElements.forEach((element) => {
          const classes = Array.from(element.classList);
          const matchingClasses = classes.filter((className) => className.startsWith('css-dev-only-do-not-override-'));
          matchingClasses.forEach((matchingClass) => {
            element.classList.remove(matchingClass);
          });
        });
      };

      removeMatchingClasses();
      const intervalId = setInterval(removeMatchingClasses, 0);
      return (): void => clearInterval(intervalId);
    }, []);

    return <WrappedComponent {...props} />;
  };

  return WrappedWithCleanup;
}

than i wraped my app like:

function App() {
  return (
     <>
      <InterwebThemeProvider>
        <ConfigProvider theme={config}>
          <AppRoutes />
        </ConfigProvider>
      </InterwebThemeProvider>
      <ToastContainer />
     <>
  );
}

export default withCleanUpClasses(App);

@ant-design-bot @AntDesigners @antd-assistant
Dear team it's not a good approach at all. Add props to switch it off in the config theme. It's a headache.