在样式组件中使用 css 选择器

Question

I recently moved to styled components as my styling method. I'm facing an issue on how to use selectors in styled components. For example i have a css like this

.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;
  }

How to use this css using style components. My current approach is something like the below code. But obviously it does not work

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;
    }

`;

Answer 1

the styled components add inline styles to the element. so you can add there only the styles that you can add on this component inline.

what you can do is create a few styles, like this:

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;
`;

then replace the label and input element with Label and Input accordingly. for example instead this:

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

type this>

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