styled-components не стилизует элемент <hr />

Question

Я пытаюсь создать линию, но styled-components дает ошибку, и вся страница не отображается.

Вот код

//using styled-components

export const Line = styled.hr`
  color: rgba(0, 0, 0, 0.65);
  marginleft: -100;
`;

Это скриншот ошибки, отображаемой в консоли браузера.

Answer 1

Tag hr не может иметь детей.Вы можете использовать hr с styled-компонентами, если это не дети.Вы просто используете это так: <Line /> Не так: <Line>Hello</Line> Ваш код строки должен выглядеть так:

const Line = styled.hr`
  color: rgba(0, 0, 0, 0.65);
  margin-left: -100px;
`;

См. Код песочницы: https://codesandbox.io/s/qxqzzko8oq