Невозможно применить стили к элементу стилизованного компонента в Reactjs

Question

Я пытаюсь обернуть компонент в styled-component div и применить некоторые стили. Однако по какой-то причине стили не применяются, даже несмотря на то, что отображается якобы правильная оболочка, которая, как ожидается, будет отображаться.

CodeSandbox

What я здесь не так делаю?

Answer 1

Вы просто забыли передать свойства className, см. Здесь:

const Component = ({ className }) => (
  <div className={className}>Hello World!</div>
);

https://codesandbox.io/s/optimistic-lumiere-cq8gt?file= / src / App. js

Надеюсь, я помогло тебе. Удачного дня.

РЕДАКТИРОВАТЬ: Проверьте документы здесь

Answer 2

Вам нужно поместить компонент в контейнер с помощью styled.{tag} или styled(Component), а затем использовать этот компонент контейнера для обертывания основного компонента.

import React from "react";
import "./styles.css";
import styled from "styled-components";

export default () => <Component />;

const Component = () => <StyledDiv>Hello World!</StyledDiv>;

const StyledDiv = styled.div`
  font-size: 10rem;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
`;

Проверьте здесь: https://codesandbox.io/s/dank-hill-h8rbc?file= / src / App. js: 128–189