Unable to change or override default styles

[muhammadtalha-13]

Hello.

Like the title says, I am unable to style the boxes. Overriding the default styles in a new .scss file does not work. Neither does the CSS in JSX method works. Even doing 'display: none' on the component has no effect whatsoever.

Kindly guide me on how to do it. Thank you.

[arunghosh]

@muhammadtalha-13
In your css /scss file (make sure this file are added to your project) add

.pincode-input-container .pincode-input-text
{
   // Provide the style you want to override. 
   // Use !important if required.
} 

Inspect the element and see if the styles are being reflected.

[arunghosh]

@muhammadtalha-13 Did it work?

[muhammadtalha-13]

Yes it totally worked @arunghosh . Thank you for your immediate help. In the GitHub README and on the npmjs page, it was written like this:

.pincode-input-container
{
.pincode-input-text
{

}
}

Writing it like the way you said worked. Maybe change the info in the README and the npmjs page?

[arunghosh]

The README was referring to scss. But I think you are using css. I will make the required update.

[WPaczula]

For anyone in the future - if you want to reset the styling completely and use your own styles applied via classes you can use this code:

const LIBRARY_INPUT_STYLE_RESET = {
  padding: undefined,
  margin: undefined,
  textAlign: undefined,
  border: undefined,
  background: undefined,
  width: undefined,
  height: undefined,
}
const LIBRARY_FOCUS_INPUT_STYLE_RESET = {
  outline: undefined,
  boxShadow: undefined,
}

...
const MyCodeInput = (props) => {
  return <ReactCodeInput
           {...props}
           inputStyle={LIBRARY_INPUT_STYLE_RESET}
           inputFocusStyle={LIBRARY_FOCUS_INPUT_STYLE_RESET}
         />
}

This way you don't have to use !important at all in your css.