Front-end/React.js
11. Styled-components : 버튼 outline, fullWidth 설정 - 컴포넌트 스타일링 | 벨로퍼트
AGAL
2020. 7. 20. 15:41
반응형
outline
Button 컴포넌트에 outline 이라는 props 를 설정하여 이 값이 true 일 때에는 테두리만 지닌 버튼을 보여주도록 설정해보겠습니다.
이 작업을 할 때에는 colorStyles 만 수정해주면 됩니다.
/src/components/Button.js :
// ...
const colorStyles = css`
${({ theme, color }) => {
const selected = theme.palette[color];
return css`
background: ${selected};
&:hover {
background: ${lighten(0.1, selected)};
}
&:active {
background: ${darken(0.1, selected)};
}
${props =>
props.outline &&
css`
color: ${selected};
background: none;
border: 1px solid ${selected};
&:hover {
background: ${selected};
color: white;
}
`}
`;
}}
`;
// ...
const StyledButton = styled.button`
// ...
/* 색상 */
${colorStyles}
// ...
`;
function Button({ children, color, size, outline, ...rest }) {
return (
<StyledButton color={color} size={size} outline={outline} {...rest}>
{children}
</StyledButton>
);
}
// ...
outline 스타일을 가진 버튼들을 렌더링해봅시다!
/src/App.js :
// ...
function App() {
return (
<ThemeProvider
theme={{
palette: {
blue: '#228be6',
gray: '#495057',
pink: '#f06595'
}
}}
>
<AppBlock>
// ...
<ButtonGroup>
<Button size="large" outline>
BUTTON
</Button>
<Button color="gray" outline>
BUTTON
</Button>
<Button color="pink" size="small" outline>
BUTTON
</Button>
</ButtonGroup>
</AppBlock>
</ThemeProvider>
);
}
fullWidth
이제 Button 컴포넌트에서 해야 할 마지막 작업이 한가지 더 남았습니다.
fullWidth 라는 props 가 주어졌다면 버튼의 크기가 100% 를 차지하도록 만들어보세요.
/src/components/Button.js :
// ...
const fullWidthStyle = css`
${props =>
props.fullWidth &&
css`
width: 100%;
justify-content: center;
& + & {
margin-left: 0;
margin-top: 1rem;
}
`}
`;
const StyledButton = styled.button`
//...
/* full Width */
${fullWidthStyle}
`;
function Button({ children, color, size, outline, fullWidth, ...rest }) {
return (
<StyledButton
color={color}
size={size}
outline={outline}
fullWidth={fullWidth}
{...rest}
>
{children}
</StyledButton>
);
}
// ...
fullWidth 스타일을 지닌 컴포넌트들도 렌더링해봅시다!
/src/App.js :
// ...
function App() {
return (
<ThemeProvider
theme={{
palette: {
blue: '#228be6',
gray: '#495057',
pink: '#f06595'
}
}}
>
<AppBlock>
// ...
<ButtonGroup>
<Button size="large" fullWidth>
BUTTON
</Button>
<Button size="large" color="gray" fullWidth>
BUTTON
</Button>
<Button size="large" color="pink" fullWidth>
BUTTON
</Button>
</ButtonGroup>
</AppBlock>
</ThemeProvider>
);
}
반응형