样式组件：Herencia

Question

我正在编写一个带有样式化组件的 React 应用程序，为我的应用程序创建一个可重用组件库，但是当我试图给一个标签属性时，我遇到了姊妹组件之间的继承问题当需要输入时在我的输入旁边，但它不起作用。我试过：

// Form.js
import { StyledLabel, StyledInput } from './styles.js'
<StyledLabel>Mi Label 1</StyledLabel>
<StyledInput required/>

// ./styles.js
import styled from 'styled-components'

export const StyledInput = styled.input`
  border: 1px #dddd solid;
`

export const StyledLabel = styled.label`
  font-size: 10px;
  ${StyledInput}['required'] + & {
    &::after {
      content: '*'
    }
  }
`

结果只有returns表格没有*

有谁知道当输入具有所需的 HTML 属性时我如何从样式化组件中检测到并显示 *

Answer 1

styled-components 中的伪选择器就像在 CSS 中一样工作。（或者更确切地说，Sass）。
所以你可以这样做你想做的事：

const Wrapper = styled.div`
label {
    &:after {
    content: "${p => p.required && "*"}";
    color: red;
  }
}`;
const Form = () => {
return (
    <Wrapper required>
    <label>Mi Label 1</label>
    <input />
    </Wrapper>
);
};

但是如果你不想将输入元素的属性传递给它的父元素，你可以这样做：

const Wrapper = styled.div`
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
`;
const Example = styled.input`
+ label {
      &:after {
        content: "${p => p.required && "*"}";
        color: red;
      }
    }
`;
const Form = () => {
  return (
    <Wrapper required>
      <Example />
      <label>My Label 1</label>
    </Wrapper>
  );
};

资源中的更多信息：

https://github.com/styled-components/styled-components/issues/388

https://github.com/styled-components/styled-components/issues/74

样式组件：Herencia

Styled component: Herencia

javascript

css

reactjs

styled-components