Apply external custom css to a reactstrap input - reactjs

Question

I have an issue applying a custom css from an external css module to an Input from Reactstrap.
So I have the following code:
<Input
className={'border-0 p-0'}
style={{
width: '150px',
height: '100px',
fontSize: '18px',
overflow: 'hidden',
resize: 'none',
backgroundColor: 'ffffff',
boxShadow: 'none',
marginTop: '-10px',
marginBottom: '10px'
}}
innerRef={register}
type={'textarea'}
readOnly
/>
It is working now with inline styling, but there are too many properties and I want to put them in an scss external module, but it's not working.
I've tried style={styles.customCss} and it's not working, my custom styles are not applied. I've also tried to put className={'border-0 p-0' && styles.customCss} and still not working.
Any ideas?
In my Css external file I have
.customCss {
width: '150px';
height: '100px';
font-size: '18px';
overflow: 'hidden';
resize: 'none';
background-color: 'ffffff';
box-shadow: 'none';
margin-top: '-10px';
margin-bottom: '10px'
}
and in my component I have
import React from 'react';
import { useForm } from 'react-hook-form';
import {
Container,
Row,
Col,
Label,
Input,
Button,
FormText
} from 'reactstrap';
import classnames from 'classnames/bind';
import styles from './styles.module.scss';
const cx = classnames.bind(styles);
const customComponent = props => {
const { register, handleSubmit } = useForm();
return (
<div className={styles.container}>
<div className={styles.heading}>
<span className={styles.label}>
{heading}
</span>
</div>
<form>
<Col className={'p-0'}>
<Input
className={cx(styles.customCss, 'border-0 p-0')}
id="customer"
name="customer"
defaultValue={lot}
innerRef={register}
type={'textarea'}
readOnly
/>
</Col>
</form>
</div>
);
};
export default customComponent;

Answer 1

I'd assume that you're working with CSS modules when importing the styles, i.e. you have an import styles from './styles.module.scss' at the top of your file.
styles.customCss would contain the actual CSS class name, not the full style object itself. So addressing your attempt in using style={styles.customCss}, that won't work. See CRA's page on CSS modules.
Now for your other attempt in using className={'border-0 p-0' && styles.customCss}, I get the idea that you're trying to concatenate the class name from your custom CSS and Bootstrap's classes. What the code actually does is perform a short-circuit evaluation on 'border-0 p-0' && styles.customCss, which will only evaluate to styles.customCss. For combining CSS classes in the className prop, usually a library like clsx is helpful.
UPDATE
Looks like your CSS file is wrong. You're working with CSS, i.e. the values don't have quotes. That means, your styling would be something like this:
.customCss {
width: 150px;
height: 100px;
font-size: 18px;
overflow: hidden;
resize: none;
background-color: #ffffff;
box-shadow: none;
margin-top: -10px;
margin-bottom: 10px;
}
Working example in sandbox demo