React 风格的组件 - 目标 first-child 和 last-child 不工作

Question

我一直在学习 React 样式组件，现在我被困在我试图在 React 中为样式 Wrapper 的第一个和最后一个子元素设计样式，但我的样式不适用。

需要帮助来理解为什么它不起作用。

下面是codesandbox link和我的代码。

https://codesandbox.io/s/target-first-child-css-styled-components-forked-9i65re

import ReactDOM from "react-dom";
import styled from "styled-components";

const Text = styled.div`
  color: green;
  font-size: 20px;
  &:first-child {
    color: red;
  }
  &:last-child {
    color: blue;
  }
`;

function App() {
  return (
    <Text>
      <div>div1</div>
      <div>div2</div>
      <div>div3</div>
      <div>div4</div>
    </Text>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

这个选择器意味着当 parent 本身是第一个 child 或最后一个 child 时，在这种情况下，它是两者:D 这就是为什么它是蓝色的，你想做的是：

const Text = styled.div`
  color: green;
  font-size: 20px;
  & div:first-child {
    color: red;
  }
  & div:last-child {
    color: blue;
  }
`;

这意味着 child div 是第一个或最后一个

React 风格的组件 - 目标 first-child 和 last-child 不工作

React styled components - target first-child and last-child not working

html

css

reactjs

styled-components