10 Oct 2022 to 17 Oct 2022
Summary
- moving my house and settled,coming back to my beloved coding.
styled components’ css props with typeScript
for single conditional styling in typeScript
1
2
3
4
const OffspringComponent = styled.div`
// other css ...
color: ${(props) => props.theme || "red"};
`;
more complicated case: (inline CSS not allowed by code convention)pass a property to a div from father component for css. use theme as the props name , then use conditional rendering ‘&&’,see example: 一定要用 theme 关键字来接收参数,然后用&&(if else 需要大括号,大括号需要 return,不然 ts 会报错.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<OffspringComponent theme={variant}>
// variant is a parameter from ancestor, destructive assignments of many props, so 'variant' cannot be changed to other keyword.
// if 'theme' keyword is not used, let say use `variant = {variant}` instead, TS will be not happy.
// conditional rendering && is used here for conditional styling.
const OffspringComponent = styled.div`
// other css ...
${(props) =>
props.theme === "round" &&
`
padding: 0px;
overflow:hidden;
border-radius:50%;
`}
`;