CSS 样式组件中的子选择器不附加更改

Question

我有一个组件是包装在样式化 div 组件中的输入，第二个组件使用第一个组件，但它应该使用子选择器更改某些 CSS 样式。我的第一个组件是

import React from "react";
import styled from "styled-components";

const Container = styled.div`
  margin: 2px 0px;
  width: 100%;
  flex-grow: 1;
`;

function EditInput() {
  return (
    <Container className="testClass">
      <input />
    </Container>
  );
}

export { EditInput };

而第二个是

import React from "react";
import { EditInput } from "./EditInput";
import styled from "styled-components";

const EditInputs = styled(EditInput)`
  div:nth-child(1) {
    background: red;
  }
  .testClass {
    background: red;
  }
  &:nth-child(1) {
    background: red;
  }
  & > *:nth-child(1) {
    background: red;
  }
`;

export function Input() {
  return <EditInputs />;
}

这 returns 我是一个输入字段，但子选择器的 CSS 不应用更改。如您所见，我尝试了多种方法，但其中 none 有效。但是，如果我将 background: red 添加到第一个组件的 Container 中，颜色就会改变。

这里我准备了一个sandbox，大家可以自己去看看。您知道我该如何解决这个问题以及为什么会发生这种情况吗？在此先感谢 o/

Answer 1

样式工厂取决于传递的类名属性。

function EditInput({ className }) {
  return (
    <Container className={className}>
      <input />
    </Container>
  );
}

CSS 样式组件中的子选择器不附加更改

CSS child selector in styled component doesn't append changes

css

reactjs

css-selectors

styled-components