Unable to change or override default styles
muhammadtalha-13 opened this issue · comments
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.
@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.
@muhammadtalha-13 Did it work?
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?
The README was referring to scss. But I think you are using css. I will make the required update.
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.