728x90
import Button from "./Button";
import styled from "styled-components";
const StyledH1 = styled.h1`
color: red;
`;
export default function App(){
const text_color="purple";
return(
<>
<StyledH1>App</StyledH1>
<Button text_color={text_color}>
<ul>
<li>A</li>
<li>B</li>
</ul>
</Button>
</>
)
}
import styled from "styled-components"
//1. html태그에 스타일 적용 ==> styled.태그명 ``형식
const StyledButton = styled.button`
color: ${(props) => props.button_color || "blue"};
background-color: yellow;
font-size: 16px;
`;
export default function Button({children, text_color}){
return(
<StyledButton button_color={text_color}>
{children}
</StyledButton>
)
}
'단순 코드 기록 > React' 카테고리의 다른 글
React_Styled_상속 (0) | 2024.03.22 |
---|---|
React_styled자식 연결 (0) | 2024.03.22 |
React_css(내부파일 / 외부파일 / styled-components) (0) | 2024.03.22 |
React_유효성검사 (0) | 2024.03.22 |
React_등록(FormData) (0) | 2024.03.22 |