Переопределение стилей компонентов React с помощью стилизованного компонента
Я попытался переопределить стиль компонента, созданного стандартным способом стилизованных компонентов (styled.), И оба способа (styled() и style.extends) у меня сработали.
Но когда я пытаюсь переопределить стиль компонента простого реагирования с помощью подхода styled(), он отображает компонент, но не отменяет его стиль.
Ниже приведен фрагмент кода
import React, { Component } from "react";
import styled from "styled-components";
export default class MyLabel extends Component {
render() {
return <label>{this.props.children}</label>;
}
}
const StyledMyLabel = styled(MyLabel)`
color: green;
`;
И для отображения я использую следующий синтаксис
<StyledMyLabel>My Styled Label</StyledMyLabel>
Пожалуйста, обратитесь к ссылка на codeandbox, который может быть полезен
Ответы 2
<label style = {{color: "green"}}>{this.props.children}</label>
или
const style = {color : "green"};
<label style = {style}>{this.props.children}</label>
Вы должны передать className желаемому элементу стиля вручную, чтобы он заработал.
import React, { Component } from "react";
import styled from "styled-components";
export default class MyLabel extends Component {
render() {
return <label className = {this.props.className}>{this.props.children}</label>;
}
}
const StyledMyLabel = styled(MyLabel)`
color: green;
`;
ПРИМЕЧАНИЕ:
Consider carefully whether to wrap your own components in a styled component, when it isn't necessary. You will disable the automatic whitelisting of props, and reverse the recommended order of styled components and structural components.
Смотрите дополнительную информацию здесь.
Обновление ссылки ... это относится к некоторой связанной информации: styled-components.com/docs/…
Может кто-нибудь объяснить, почему это неправильный ответ?