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.

Conflict with other CSS package

See original GitHub issue

What package has an issue

@mantine/core

Describe the bug

I’m using TailwindCSS which injects things like this in a CSS sheet

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

This results in conflicts with mantine button styles that get overwritten. The issue is that mantine generate inlines styles that get overrides by the stylesheet of tailwind. I could disable tailwind rules, but i Rather having the one from mantine be specifically applied on mantine specific button.

In order to achieve that I would like to know if there is a way to inject the css of mantine after the one from tailwind using a directive or something like that ? Didn’t found anything related to this in the documentation.

Thanks

In which browser did the problem occur

Ever

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

Having capability to inject mantine css after tailwind one

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:13 (3 by maintainers)

Top GitHub Comments

21reactions

dexcellcommented, Mar 12, 2022

The current workaround is to add prepend false in mantine provider.

emotionOptions={{ key: "mantine", prepend: false }}

so mantine will be loaded after tailwind, this will load mantine button styles correctly, but i haven’t dig deep to see other things goes wrong or not.

e.g. _app.tsx

export default function App(props: AppProps) {
  const { Component, pageProps } = props;

  return (
    <>
      <Head>
        <title>Page title</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>

      <MantineProvider
        withGlobalStyles
        withNormalizeCSS
        emotionOptions={{ key: "mantine", prepend: false }}
        theme={{
          colorScheme: "dark",
        }}
      >
        <Component {...pageProps} />
      </MantineProvider>
    </>
  );
}

12reactions

rtivitalcommented, Jul 2, 2022

emotionOptions are not supported in v5, you need to provide your own emotion cache – https://v5.mantine.dev/theming/emotion-cache/

Top Results From Across the Web

Legacy CSS conflicts with Bootstrap - how to resolve?

This issue occurs when an HTML document recognizes two parameter of one style within it. Remove or comment or modify parameters that caused ......

How We Solve CSS Versioning Conflicts Here at New Relic

There is no perfect solution for CSS versioning issues—basically, double-class collisions in CSS—and the industry approaches vary widely, from a ...

CSS namespaces: how to avoid conflict between style sheets ...

Learn how to encapsulate any CSS file in its own namespace, avoiding name collisions between your files and those shipped with Bootstrap, ...

How to Isolate Bootstrap CSS to Avoid Conflicts - Formden.com

This article will teach you how to isolate Bootstrap CSS from other CSS on your website so that they do not conflict.

CSS Conflict Resolution Rules Explained - Medium

When there are two different declarations for the same element but they focus on different attributes, the styles simply merge, and the element ......