样式化-组件不样式化<hr />元素

Question

我正在尝试创建一行代码，但是样式化的组件给出了一个错误，整个页面都不能渲染。

下面是代码

​

//using styled-components

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

​

这是浏览器控制台中显示的错误屏幕截图。

​

Answer 1

标记hr不能有子项。你可以将hr与styled component一起使用，以防它不是子组件。你只需要这样使用它：<Line />不是这样：<Line>Hello</Line>你的代码行必须是这样的：

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

请参阅代码沙箱：https://codesandbox.io/s/qxqzzko8oq