在样式化组件中使用 CSS 选择器答案

【问题标题】：using css selectors in styled components在样式化组件中使用 CSS 选择器
【发布时间】：2020-05-25 15:53:23
【问题描述】：

我最近搬到styled components 作为我的造型方法。我面临一个关于如何在样式组件中使用selectors 的问题。例如我有一个这样的CSS

.input-w-l-container{
    // padding:10px;
    border:1px solid;
    height:42px;
    border: 1px solid rgba(0, 0, 0, 0.32);
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
  }
  .input-w-l-container>label{
    position:absolute;
    top:-11px;
    // left:25px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 10px;
    letter-spacing: 0.4px;
    color: rgba(0, 0, 0, 0.3);

  }

  .input-w-l-container>input{
    border:none;
    height:32px;
    margin-top: -5px;
    outline: none;
    padding-left: 4px;
  }

如何使用样式组件来使用这个 css。我目前的方法类似于下面的代码。但显然它不起作用

const InputContainer = styled.div`
    border:1px solid;
    height:42px;
    border: 1px solid rgba(0, 0, 0, 0.32);
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-flow: column-reverse;
    font-size: 12px !important;

    & > label {
        position:absolute;
        top:-11px;
        font-size: 12px;
        padding-left: 5px;
        padding-right: 10px;
        letter-spacing: 0.4px;
        color: rgba(0, 0, 0, 0.3);
    }

    & > input {
        border:none;
        height:32px;
        margin-top: -5px;
        outline: none;
        padding-left: 4px;
    }

`;

【问题讨论】：

您必须单独设置孩子的样式。这篇文章应该对你有所帮助：styled-components.com/docs/…
我参考了这个文件。但无法完全理解。可以举个例子吗？

标签： css reactjs styled-components

【解决方案1】：

样式化的组件为元素添加内联样式。所以你可以只添加你可以在这个组件上内联添加的样式。

您可以做的是创建一些样式，如下所示：

const InputContainer = styled.div`
border:1px solid;
height:42px;
border: 1px solid rgba(0, 0, 0, 0.32);
box-sizing: border-box;
border-radius: 4px;
overflow: hidden;
display: flex;
flex-flow: column-reverse;
font-size: 12px !important;
`
const Label = styled.label`
    position:absolute;
    top:-11px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 10px;
    letter-spacing: 0.4px;
    color: rgba(0, 0, 0, 0.3);
`;
const Input = styled.input`
    border:none;
    height:32px;
    margin-top: -5px;
    outline: none;
    padding-left: 4px;
`;

然后将label 和input 元素相应地替换为Label 和Input。例如改为：

<InputContainer>
   <label>name</label><input type="text" placeholder="Jhon Doe"/>
</InputContainer>

输入这个>

<InputContainer>
   <Label>name</Label><Input type="text" placeholder="Jhon Doe"/>
</InputContainer>

【讨论】：