How can I change the aspect of the disabled inputs globally?

[odd trout]

Hi! the idea if is possible is to change the way the disabled inputs show in all the cases, where I want them to increase the readable, for example change text colors

[jade birch]

Yes, you can change inputs styles with Styles API – https://mantine.dev/core/input/#styles-on-theme

[odd trout]

I am getting this error when make the setup in the root layout in Next JS

{imported module ./nodemodules/@mantine/core/esm/components/Input/Input.mjs}.Input.extend is not a function
app/layout.tsx (32:18) @ module evaluation

30 | scale: 0.95,
31 | components: {

32 | Input: Input.extend({
| ^
33 | styles: {
34 | input: {
35 | '&:disabled, &[data-disabled]': {

I share the file

[jade birch]

You eed to add use client to the top of the file

[odd trout]

thanks, i did it but neither change the inputs with that code, so change the values of the disabled color css variables, but it affects all elements and not only inputs

[rich roost]

The best way it's using the CSS resolver:

"use client";

import { CSSVariablesResolver, MantineProvider, Input } from "@mantine/core";

export const resolver: CSSVariablesResolver = (theme) => ({
variables: {},
dark: {
"--input-disabled-bg": theme.colors.red[6],
"--input-disabled-color": theme.colors.red[2],
},
light: {
"--input-disabled-bg": theme.colors.red[1],
"--input-disabled-color": theme.colors.red[8],
},
});

export default function StylesProvider({ children }: React.PropsWithChildren) {
return (
<MantineProvider
cssVariablesSelector="html"
cssVariablesResolver={resolver}
>
{children}
</MantineProvider>
);
}

You can set the resolver in a different resolver.ts or theme.ts file and then import it into your MantinProvider file, that needs to be a client component.