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

user_19649713 0
Viewed 40

//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;}
styled-components reactjs css
1 Answers

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;
user_117294680
Related