стилевые компоненты, не применяющие стиль к пользовательскому функциональному компоненту реакции

Question

При использовании styled-components для стилизации пользовательского функционального компонента реакции стили не применяются.Вот простой пример , где стили не применяются к StyledDiv:

const Div = () => (<div>test</div>)
const StyledDiv = styled(Div)`
  color: red;
`;

Каков наилучший способ убедиться, что стили применяются правильно?

Answer 1

При использовании styled(Component) подобным образом создается класс, который передается в виде свойства с именем className обернутому компоненту.

Затем вы можете применить его к корневому элементу:

const Div = ({ className }) => (
  <div className={className}>test</div>
)

const StyledDiv = styled(Div)`
  color: red;
`;

Answer 2

Если вы не можете изменить исходный компонент (он импортирован или сгенерирован), давайте предположим, что компонент является <span>, вы можете обернуть его, например, <div> и вложить правила css, например:

const ComponentICantTouchWrapper = ({className}) => (
    <div className={className}><ComponentICantTouch /></div>
);
const StyledComponentICantTouch = styled(ComponentICantTouchWrapper)`
    > span {
        color: red;
    }
`;

Answer 3

Из документов :

Стилизованный метод отлично работает на всех ваших собственных или любых сторонних компонентах, если они передают реквизит className вих визуализированные подкомпоненты, которые тоже должны его передавать, и так далее.В конечном счете, className должно быть передано по линии фактическому DOM-узлу, чтобы стиль мог применить любой эффект.

Например, ваш компонент станет:

const Div = ({ className }) => (<div className={className}>test</div>)
const StyledDiv = styled(Div)`
  color: green;
`;

Modifiedпример:

const styled = styled.default
const Div = ({ className }) => (<div className={className}>test</div>)
const StyledDiv = styled(Div)`
  color: green;
  font-size: larger;
`;
const App = () => {
  return(<StyledDiv>Test</StyledDiv>)
}

ReactDOM.render(<App />, document.querySelector('.app'))

<script src="//unpkg.com/react@16.5.2/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom@16.5.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.4.9/styled-components.min.js"></script>
<div class="app"></div>