CODEWITHSUNDEEP
reactjsuser-interfacemantine
Eleanor Scerri
Eleanor Scerri

Reputation: 1

Hover color override for Mantine (v7) Button not working

I have this simple button using React and Mantine for testing an issue I have (v7.13.3)

import React from "react";
import ReactDOM from "react-dom/client";
import { MantineProvider, Button } from "@mantine/core";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <MantineProvider>
    <React.StrictMode>
      <Button
        size="md"
        styles={{
          root: {
            backgroundColor: 'blue',
            '&:hover': {
              backgroundColor: 'red',
            },
          },
        }}
      >
        TEST BUTTON
      </Button>
    </React.StrictMode>
  </MantineProvider>
);

But hovering the button doesn't actually change the color as expected. Hovering does change the color when not actually overriding it though. I've seen similar examples using earlier versions of Mantine and they worked just fine.

I expected a blue button to show with the Text "TEST BUTTON" which then turned red once hovered over.

Upvotes: 0

Views: 446

Answers (2)

Saad Qadir
Saad Qadir

Reputation: 1

Mantine components do not support nested inline styles out of the box. The following example will not work:

import { Button } from '@mantine/core';

function Demo() {
  return (
    <Button
      style={{
        // ✅ This works
        backgroundColor: 'hotpink',

        // ❌ This does not work
        '&:hover': { color: 'lightgreen' },
      }}
      styles={{
        root: {
          // ✅ This works
          backgroundColor: 'hotpink',

          // ❌ This does not work
          '&[data-disabled]': { color: 'lightgreen' },
          '&:hover': { color: 'lightgreen' },
          '&:focus': { color: 'lightgreen' },
          '& span': { color: 'lightgreen' },
        },
      }}
    >
      This has a hotpink background.
    </Button>
  );
}

For further details, visit this link: https://help.mantine.dev/q/nested-inline-styles

Solution

Creat a CSS file

eg.

Button.module.css

import your class like

import classes from "../style/Button.module.css";

and Button like

<Button classNames={{root: classes.root}}>Test</Button>

Upvotes: 0

Goktug
Goktug

Reputation: 41

Try sx prop emotion.

`    <Button
        size="md"
        sx={(theme) => ({
          backgroundColor: 'blue',
          '&:hover': {
            backgroundColor: 'red',
          },
        })}
      >
        TEST BUTTON
      </Button>`

https://mantine.dev/styles/emotion/

Upvotes: 0

Related Questions