如何将此CSS代码转换为样式化组件?

你也许可以用下面这样的东西来实现你所需要的,但你必须根据自己的需要进行调整。您可能需要考虑正在构建的组件是否可以重用,并检查使用该库的不同模式。

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;