How to add custom CSS to existing styled component? - reactjs

Question

I have an issue related to styled component.
I have a prewritten Select component and I want to write my own select component by using that.
Here are some codes that I wrote.
in the Comopnent.tsx
...
import Select from './Select'
const StyledSelect = styled(Select)`
// CUSTOMIZED STYLES
height: 25px;
border-radius: 10px;
cursor: default;
`
...
const Component1:React.FC = () => {
...
return (
<StyledSelect
options={[
{
label: t('Hot'),
value: 'hot',
},
{
label: t('APR'),
value: 'apr',
},
{
label: t('Multiplier'),
value: 'multiplier',
},
{
label: t('Earned'),
value: 'earned',
},
{
label: t('Liquidity'),
value: 'liquidity',
},
]}
onChange={handleSortOptionChange}
/>
)
}
...
in the Select.tsx
...
const DropDownContainer = styled.div<{ isOpen: boolean; width: number; height: number }>`
cursor: pointer;
width: ${({ width }) => width}px;
position: relative;
...
`
const Select:React.FunctionComponent<SelectProps> = ({options, onChange}) => {
...
return (
<DropDownContainer isOpen={isOpen} ref={containerRef} {...containerSize}>
{containerSize.width !== 0 && (
<DropDownHeader onClick={toggling}>
<Text>{options[selectedOptionIndex].label}</Text>
</DropDownHeader>
)}
<ArrowDropDownIcon color="text" onClick={toggling} />
<DropDownListContainer>
<DropDownList ref={dropdownRef}>
{options.map((option, index) =>
index !== selectedOptionIndex ? (
<ListItem onClick={onOptionClicked(index)} key={option.label}>
<Text>{option.label}</Text>
</ListItem>
) : null,
)}
</DropDownList>
</DropDownListContainer>
</DropDownContainer>
)
}
...
But CUSTOMIZED STYLES don't work.
I have some similar experience with adding custom CSS to the existing styled component like the above but I don't know why that doesn't work.
What is my fault?

Answer 1

You forgot to accept a property className and set it on needed element.
Below is an example. Pay attention to the className in the props and set it to the container.
To style the component, you need to pass the className props. And in the component where you get that className prop, you need to assign it to the element that needs to be styled, like so:
Notice how Link takes a className and assigns it to Element "a".
const Link = ({ className, children }) => (
<a className={className}>
{children}
</a>
);
const StyledLink = styled(Link)`
color: palevioletred;
font-weight: bold;
`;
For more detail, check official docs.
https://styled-components.com/docs/basics#styling-any-component
const Select:React.FunctionComponent<SelectProps> = ({options, onChange, className}) => {
...
return (
<DropDownContainer className={className} isOpen={isOpen} ref={containerRef} {...containerSize}>
{containerSize.width !== 0 && (
<DropDownHeader onClick={toggling}>
<Text>{options[selectedOptionIndex].label}</Text>
</DropDownHeader>
)}
<ArrowDropDownIcon color="text" onClick={toggling} />
<DropDownListContainer>
<DropDownList ref={dropdownRef}>
{options.map((option, index) =>
index !== selectedOptionIndex ? (
<ListItem onClick={onOptionClicked(index)} key={option.label}>
<Text>{option.label}</Text>
</ListItem>
) : null,
)}
</DropDownList>
</DropDownListContainer>
</DropDownContainer>
)
}
...