Why aren't the styles applied to the component already wrapped (styled-components)?

Question

React

There is a ListItem component, inside it is nested the Label component, which is already styled earlier.

import Label from './../../Elements/Label/Label';

const LabelStyled = styled(Label)`
    width: 10%;
    flex-grow: 1
`;

export default (props) => {
    return (
        <ListItem>
            <LabelStyled>{ 'Ярлык' }</LabelStyled>
        </ListItem>
    )
}

Label Component

import React from 'react';
import styled from 'styled-components';

const Label = styled.div`
    border: none;
    border-radius: 20px;
    background-color: #f63;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    
`;

export default (props) => {
    return (
        <Label>
            { props.children }
        </Label>
    )
}

As a result, only the styles prescribed for the main styling are applied to the component. There are no errors.

Answer 1

It turns out you still need to pass className

import React from 'react';
import styled from 'styled-components';

const Label = styled.div`
    border: none;
    border-radius: 20px;
    background-color: #f63;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    
`;

export default (props) => {
    return (
        <Label className={props.className}>
            { props.children }
        </Label>
    )
}

That's how it works.