//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;}
CodePudding user response:
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;