using css selectors in styled components

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

`;

You have to individually style the children. This article should help you: styled-components.com/docs/… — Aslam
– Aslam, Commented Feb 10, 2020 at 10:41
I refered this document. But could not fully understand. Can you give me a example? — CraZyDroiD
– CraZyDroiD, Commented Feb 10, 2020 at 10:44

Yosef Tukachinsky · Accepted Answer · 2020-02-10 10:44:52Z

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>

Collectives™ on Stack Overflow

using css selectors in styled components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related