I am new to reactjs. I have a Component like

const CalendarComponent: React.FC = () => {
<DropdownContainer>
<CustomDropdown>
<span>{label}</span>
<ArrowIconContainer>
<NextImage src={DownArrowIcon}/>
</ArrowIconContainer>
</CustomDropdown>
isOpen && (
<CalendarComponent/>
)}
</DropdownContainer>
);
};

These all elements (DropdownContainer,CustomDropdown,ArrowIconContainer,CalendarComponent) are defined using StyledComponents in another file.

Now, I am using this component CalendarComponent in another component, from that component I want to override the styles of these inner elements (DropdownContainer,CustomDropdown,ArrowIconContainer,CalendarComponent) using StyledComponents.

Is this possible ? And What is the best practice to achieve this kind of scenario. It will be better if someone can explain with example as I am new to this.

I tried something as below:

const CalendarDateDropDown = styled(DropdownCalendarComponent)`
  & > div {
    display: flex;
    width: 199px !important;
    padding: 4px 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Input-Field-Backround, #f5f5f7);
  }
`;

but its not working, I want the best practice that is followed in react community to achieve this.