【React】styled-componentsでpropsを使う時の書き方大全
17710 ワード
styled-componentsでpropsを使って動的にスタイルを変えたい時に、いろいろな書き方ができます。
意外とまとまったリファレンスがなかったので、今回は私が仕事でよく使う・見かける書き方をまとめてみました。
環境
- React 18.0.0
- TypeScript 4.6.3
- styled-components 5.3.5
props.XXX
App.tsx
import styled from "styled-components";
function App() {
return (
<Container background={"red"} isActive={true}>
スタイルドコンポーネント
</Container>
);
}
const Container = styled.div<{ background: string; isActive: boolean }>`
${(props) => `background: ${props.background}`};
${(props) => props.isActive && `background: red; color: blue; width: 100px`};
background: ${(props) => props.background};
background: ${(props) => `${props.background}`};
background: ${(props) => (props.isActive ? props.background : "")};
background: ${(props) => (props.isActive ? `${props.background}` : "")};
background: ${(props) => props.isActive && props.background};
background: ${(props) => props.isActive && `${props.background}`};
`;
export default App;
分割代入 (Destructuring assignment)
毎回propsを書かなくてよくなるので、私は基本的に分割代入を使っています。
App.tsx
import styled from "styled-components";
function App() {
return (
<Container background={"red"} isActive={true}>
スタイルドコンポーネント
</Container>
);
}
const Container = styled.div<{ background: string; isActive: boolean }>`
${({ background }) => `background: ${background}`};
${({ isActive }) => isActive && `background: red; color: blue; width: 100px`};
background: ${({ background }) => background};
background: ${({ background }) => `${background}`};
background: ${({ background, isActive }) => (isActive ? background : "")};
background: ${({ background, isActive }) => isActive ? `${background}` : ""};
background: ${({ background, isActive }) => isActive && background};
background: ${({ background, isActive }) => isActive && `${background}`};
`;
export default App;
さいごに
以上になります。
他にも書き方があればコメントいただけると幸いです。
Author And Source
この問題について(【React】styled-componentsでpropsを使う時の書き方大全), 我々は、より多くの情報をここで見つけました https://zenn.dev/lilac/articles/7c235a1841a8da著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol