How do I turn this CSS code into Styled-Components?

Question

//ReactJS

import '/styling.css'

const Page = () =>{ 
             
   return( <div className="Search-box"><input className="Text"></input><div>)

}

export default Page;

//CSS

.Search-box{box-radius:40px;}

.Search-box:hover > .Text{ padding:10px;}

Answer 1

You could probably achieve what you need with something like the below, but you will have to adjust according to your needs. You might have to consider if the components you are building can be reused and check different patterns of using this library.

Their documentation is well organized and intuitive. You should check it out:

https://styled-components.com/docs/basics

import styled from 'styled-components';

const StyledPageCotainer = styled.div`
  border-radius: 40px;
  &:hover > .Text {
    padding: 10px
  }
`;

const Page = () => (
   <StyledPageContainer className="Search-box">
     <input className="Text" />
   </StyledPageContainer>
);


export default Page;