実績作成【Reactの中級】(Techpit)2巡目

Typescript,CSS in JS(Emotion)

• 5章 : 操作するためのボタン作成
  • 5-2 ナビゲーションの実装【済】

Emotionで複数のスタイルを適用させるとき

cssに配列で指定することで、スタイリングを適用させることができる。
単純なことに、、CSSやSassに慣れすぎてしまっているせいか、結構苦戦してしていました…。
CSS in JSを実感しました。
【参考】https://qiita.com/282Haniwa/items/7248bed02a1b5b66579f

const upVisibility = difficulty < 5;
<div
	css={[difficultyButton, difficultyUp, !upVisibility && isHidden]}
	onClick={onUpDifficulty}
	></div>

const difficultyButton = css`
	//スタイリング
`;
const difficultyUp = css`
	//スタイリング
`;
const difficultyDown = css`
	//スタイリング
`;
const isHidden = css`
  visibility: hidden !important;
`;