className in labelProps of InputWrapper is not applied

[Toshinaki]

What package has an issue

@mantine/core

Describe the bug

https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/components/InputWrapper/InputWrapper.tsx

    const inputLabel = createElement(
      labelElement,
      {
        ..._labelProps,
        ...labelProps,
        id: id ? `${id}-label` : undefined,
        className: classes.label,
      },
      <>
        {label}
        {required && (
          <span className={classes.required} aria-hidden>
            {' *'}
          </span>
        )}
      </>
    );

As this part of code showed, classaName provided in labelProps will be ignored.

In which browser did the problem occur

all, I think

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

No response

Do you know how to fix the issue

Yes

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

No response

Possible fix

wrap the className with cx

https://github.com/mantinedev/mantine/blob/bc7e4d8cecc349821f44d4afa82e02fe646c35e9/src/mantine-core/src/components/InputWrapper/InputWrapper.tsx#L87

change this line to

cx(className, labelProps.className)

[rtivital]

You can add className to label with <InputWrapper classNames={{ label: 'my-label' }} />

[Toshinaki]

Yes of course. I could also add style to labelProps. But all these are but workarounds.

It would be strange not able to set className while labelProps is provided. Or is there any reason to prevent user from doing this?

[bogordesaincom]

classNames not className

please check s

[rtivital]

Fixed in 5.0