styled-components does not style <hr /> element

Question

I am trying to make a line but styled-components gives an error and the whole page doesn't render.

Here's the code

//using styled-components

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

This is the screenshot of error shown in the browser's console.

Answer 1

Tag hr can not have children. U can use hr with styled-components in case it doesn't children. U just use it like this: <Line /> Not like this: <Line>Hello</Line> Your code Line must like this:

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

See the code sandbox: https://codesandbox.io/s/qxqzzko8oq