InputText: It doesn't take classNames when unstyled is true

[mevlutcantuna]

Describe the bug

InputText doesn't take given classNames when unstyled prop is true

Reproducer

https://stackblitz.com/edit/kuem11?file=src%2FApp.jsx,package.json

PrimeReact version

10.6.2

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

1. Pass unstyled prop to InputText
2. Give it a className
3. Check it has or not className

Expected behavior

It must take given classNames, but remove initial classNames that come from prime

[melloware]

i thought in unstyled mode you were supposed to use PT?

See: https://stackblitz.com/edit/kuem11-ajcwbr?file=src%2FApp.jsx

[mevlutcantuna]

@melloware okay. I am using unstyled mode to remove initial class names like other component

[melloware]

i will leave this open as I am not sure but at least you have a workaround!

[mevlutcantuna]

will every component be like this now?

[melloware]

Not sure i will let Primetek chime in. I assigned this to them.

[peconomou929]

This is also a problem I experienced.

Imagine you want to build a reusable component like a button, call it MyButton (see the code snippet below). To do this you use an unstyled PrimeReact Button, and give it your custom pass through options. In order to abstract away these modifications, you wrap it in a component which "forwards" its props to PrimeReact Button.

import { Button, ButtonProps } from 'primereact/button'

export function MyButton(props: ButtonProps) {
    return <Button {...props} unstyled pt={myButtonPTOptions} />
}

Now, say I want to create a MyButton with a left margin. If am using Tailwind, I might try something like <MyButton className="ml-2"/>, but, for the reasons mentioned in this issue, this will not work, as the class name gets thrown away in unstyled mode.

There are of course work-arounds, such as

• using the style property instead of the className property
• adding custom login inside the pass-through options object which "reads" the className attribute, and appends those class names to the root element class name list.

But...it would be nice if PrimeReact just took care of this properly. The expected behaviour would be that the unstyled tag simply remove PrimeReact class names, such as p-component, p-button, etc. and doesn't remove any other class names.

[melloware]

Agreed this is unexpected behavior.

[peconomou929]

Thanks for the PR!

Seems to fix it for the input text, but there are still some other components which suffer the same exact bug, e.g. the tab menu. Should we consider that part of this issue and keep this one open?

[melloware]

I would create a new issue please and just use the bullet list feature of GitHub to list the components that have the issue!

[peconomou929]

Done. Please see this issue.