Задать вопрос
RazerVG
@RazerVG
FrontEnd
react

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

Есть компонент 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>
    )
}


В итоге к компоненту применяются только стили прописанные для основной стилизации. Ошибок никаких нет.
  • Вопрос задан
  • 893 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 2
RazerVG
@RazerVG Автор вопроса
FrontEnd
Оказывается нужно еще прокидывать 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>
    )
}


Так работает.
Ответ написан
Комментировать
Комментировать
@curious-101
Frontend developer
Так как вы экспортируете 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;
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Лидсканнер\парсер для Telegram по поиску заказов по ключевым словам
25 апр. 2024, в 14:26
6000 руб./за проект
Разработать дизайн продающего лендинга
25 апр. 2024, в 14:21
15000 руб./за проект
Шаблон WP - настройка
25 апр. 2024, в 14:07
20000 руб./за проект
Ещё заказы