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

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

CodeSandbox

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


reactjs javascript styled-components
person Mike K    schedule 03.08.2020    source источник
comment
Очень интересно. Я использовал его почти так же, как вы описываете в проекте, над которым я недавно работаю, но там все нормально ...   -  person Rosen Dimov    schedule 03.08.2020
comment
Также пытался воспроизвести ситуацию из моего проекта в песочнице, но не работает.   -  person Rosen Dimov    schedule 03.08.2020

Ответы (2)


arrow_upward
2
arrow_downward

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

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

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

Надеюсь, я вам помог. Хорошего дня.

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

person Anxium    schedule 03.08.2020

arrow_upward
0
arrow_downward

Вам нужно поместить компонент в контейнер с 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

person Pankaj    schedule 03.08.2020