스타일이 지정된 구성 요소 <💅>
응용 프로그램에서 구성 요소 수준 스타일을 사용할 수 있습니다.
설치
npm install styled-components
yarn add styled-components
사용하기 전에 가져오기
import styled from styled-components
;기본 스타일 구성 요소
Create Button Component with the help of styled-components and can be reuse anywhere without worrying about its CSS.
import styled from "styled-components";
const StyledButton = styled.button`
border: 2px solid #4caf50;
background-color: #4caf50;
color: white;
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
transition: 0.5s all ease-out;
`;
export default StyledButton;
function App() {
return (
<div className="App">
<StyledButton>Styled Button</StyledButton>
</div>
);
}
소품이 있는 스타일이 지정된 구성 요소
Pass a function to a styled components template literal to adapt it based on its props.
import styled from "styled-components";
const StyledButton = styled.button`
border: 2px solid #4caf50;
background-color: #4caf50;
color: white;
background-color: ${(props) =>
props.variant === "outline" ? "#fff" : "#4caf50"};
color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
transition: 0.5s all ease-out;
`;
export default StyledButton;
function App() {
return (
<div className="App">
<StyledButton>Styled Button</StyledButton>
<div>
<br />
</div>
<StyledButton variant="outline">Styled Button</StyledButton>
</div>
);
}
스타일 확장
To easily make a new component that inherits the styling of another, just wrap it in the
styled()
constructor.
import styled from "styled-components";
export const StyledButton = styled.button`
border: 2px solid #4caf50;
background-color: ${(props) =>
props.variant === "outline" ? "#fff" : "#4caf50"};
color: ${(props) => (props.variant === "outline" ? "#4caf50" : "#fff")};
padding: 15px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
cursor: pointer;
transition: 0.5s all ease-out;
`;
export const FancyButton = styled(StyledButton)`
background-image: linear-gradient(to right, #f6d365 0%, #fda085 100%);
border: none;
`;
function App() {
return (
<div className="App">
<StyledButton>Styled Button</StyledButton>
<div>
<br />
</div>
<StyledButton variant="outline">Styled Button</StyledButton>
<div>
<br />
</div>
<FancyButton as="a">Fancy Button</FancyButton>
{/* as - is a polymorphic prop => pass anchor tag */}
</div>
);
}
결론
Reference
이 문제에 관하여(스타일이 지정된 구성 요소 <💅>), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/saishj/styled-components--520h텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)