代码之家 › 专栏 › 技术社区 › Omphile James

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

styled-components reactjs css

Omphile James · 技术社区 · 2 年前

//反应JS

import '/styling.css'

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

}

export default Page;

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

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

1 回复 | 直到 2 年前

Rafael Freitas 2 年前

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

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;

推荐文章