styled-components でもカスタムデータ属性を使うと綺麗にかけて便利

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>

関連記事

• CSS設計の類はもっとカスタムデータ属性を活用するべきでは - Qiita
• idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita