Расширение стилей с помощью не работающих стилевых компонентов

Question

Я пытаюсь расширить стили для реагирующего компонента, используя styled-components, но не работает. AFAIK, я делаю это правильно, но, возможно, я что-то упустил ... Вот что у меня есть:

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

const TextContainer = ({ text }) => {
  return <p dangerouslySetInnerHTML={{ __html: text }} />;
};

const Paragraph = styled(TextContainer)`
  background: red;
`;

class Home extends React.Component {
  render() {
    const { t } = this.props;
    return <Paragraph text="This is a test" />;
  }
}

export default Home;

Конечно, ожидаемый результат должен иметь красный фон на p, но сейчас результат выглядит так:

Есть идеи, как это решить? Возможно, я что-то упускаю, но не могу понять, что.

Спасибо заранее!

Answer 1

Я не знал, что это был способ сделать это. Я бы сделал:

    const Link = styled.a`
    ..put you css styles here (className styles)
   `

   const StyledLink = styled(Link) `
      color: palevioletred;
      font-weight: bold;
   `

render(){
return(
<div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
)
}

Answer 2

Как указано в документации:

Стилизованный метод отлично работает на всех ваших или любых сторонние компоненты, такие как , если они присоединяют переданное имя_класса prop элементу DOM.

Пример

// This could be react-router-dom's Link for example
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

Ссылка: https://www.styled -components.com / docs / basics # styling-any-components