Почему не применяются стили для компонента, ранее уже обернутого (styled-components)?

Question

[Владимир Голубь]

Есть компонент ListItem, внутри него вложен компонент Label, который уже стилизован ранее.

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

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

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

Компонент Label

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>
    )
}

В итоге к компоненту применяются только стили прописанные для основной стилизации. Ошибок никаких нет.

Comments

[Павел Диденко]

А без дополнительного оборачивания стили нормально отрабатывают?

[Владимир Голубь]

Павел Диденко, да

Answer 1

[Владимир Голубь]

Оказывается нужно еще прокидывать 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>
    )
}

Так работает.

Answer 2

[dev null]

Так как вы экспортируете Label как реакт компонент, то ему нужно свойство className

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

upd:
Почему бы просто не сделать так?

import styled from 'styled-components';

export 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 Label;

Comments

[Владимир Голубь]

есть места где используется без стилизации.