带有 :before 的兄弟选择器在样式组件中不起作用？

Question

如何使用这个

li+li:before {
  padding: 8px;
  color: black;
  content: "/[=10=]a0";
}

在样式组件中？我试图转换这个 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_breadcrumbs

到样式组件，但它不起作用。

https://codesandbox.io/s/recursing-pasteur-mkmyh?file=/src/App.js

Answer 1

content 的内容似乎是罪魁祸首。其余代码没问题。

而不是 /[=12=]a0，应该是 /\00a0。这似乎是一个 styled-components 特定问题。

这里有一个简短的引用作为解释，来源有更深入的讨论。

Basically because you write CSS in JS you have to escape twice - once for JS parser and once for CSS one.

Source/GitHub

完整的工作代码：

import styled from "styled-components";

export default function Namaste() {
  return (
    <UL>
      <li>
        <a href="/#">Home</a>
      </li>
      <li>
        <a href="/#">Pictures</a>
      </li>
      <li>
        <a href="/#">Summer 15</a>
      </li>
      <li>Italy</li>
    </UL>
  );
}

const UL = styled.ul`
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;

  li {
    display: inline;
    font-size: 18px;
    color: red;
  }
  li + li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
  }
  li a {
    color: #0275d8;
    text-decoration: none;
  }
`;

带有 :before 的兄弟选择器在样式组件中不起作用？

sibling selector with :before doesn't work in styled-component?

javascript

jsx

reactjs

styled-components