использование селекторов css в стилизованных компонентах

Question

Я недавно перешел на 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;
    }

`;

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

, а затем заменить * 1006. * и 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>