如何将这些CSS代码转换为样式化的组件？

Question

//反应联合材料

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

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

他们的文档组织得很好，很直观。你应该去看看：

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;