styled-components には props を受け取るコア機能があり、大変便利です。
ですが、条件分岐(三項演算子など)の記述はきれいに書けるとは思えません。正直、書いててクソ面倒です。
Props 分岐の例
公式の例です。
styled-components: Basics
https://www.styled-components.com/docs/basics#adapting-based-on-props
const Button = styled.button`
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
<div>
<Button>Normal</Button>
<Button primary>Primary</Button>
</div>
解決案 - カスタムデータ属性
そこでカスタムデータ属性(custom data type)を使用する場合以下のように書けます。
const Button = styled.button`
background: white;
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
&[data-primary='true'] {
background: palevioletred;
color: white;
}
`
<div>
<Button>Normal</Button>
<Button data-primary>Primary</Button>
</div>
読みやすくもなりました。
もう一つ例を示しておきます。
value が boolean でない例です。
const Button = styled.button`
background: white;
color: gray;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 3px solid gray;
border-radius: 3px;
&[data-level='success'] {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
&[data-level='info'] {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
&[data-level='warning'] {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
&[data-level='danger'] {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
`
<div>
<Button>Normal</Button>
<Button data-level="success">Success</Button>
<Button data-level="info">Info</Button>
<Button data-level="warning">Warning</Button>
<Button data-level="danger">Danger</Button>
</div>
関連記事