how to remove inline width from input

[preeti-droom]

• Steps to reproduce the issue:

• Relevant error messages and/or screenshots:

[apollonian]

@preeti-droom You may override it by using the inputStyle prop.

[preeti-droom]

But i don't want to override the width using '!important' in css, if any other solution then let me know

[yasasvy]

how to apply styling to the individual default boxes after using OtpInput component?

[rtrembecky]

Hey, I have the same issue. In my case, I want to pass className from the Material UI styling solution (useStyles/makeStyles) to inputStyle props, but I can't override the width in my class, because the default one is always passed into style of the <input> elements and overrides mine. So either the style should not be applied when there is a className in inputStyle, or there should be a prop to turn the default style off, something like isDefaultInputStyleApplied: boolean with a true default.

[apollonian]

So either the style should not be applied when there is a className in inputStyle, or there should be a prop to turn the default style off, something like isDefaultInputStyleApplied: boolean with a true default.

@rtrembecky Considering something along similar lines for the next major release! Eliminating the limitations that inputStyle brings by doubling as a className prop is something to be addressed too. So, I'm thinking we could split it into inputStyle and inputClassName, where the inputStyle prop only takes a CSS style object and inputClassName applies class names to the input(s).

how to apply styling to the individual default boxes after using OtpInput component?

This would also allow us to accept a function and individually apply classnames to inputs.

[mdsadiq]

@apollonian is this change already in the release ? is it something that we could contribute ?

[prateek3255]

You can now fully customize the input component with v3. Check the docs for more info

[Supersmf]

you can remove style property from renderInput function renderInput={({ style, ...props }) => <input {...props} />}