styled-components
https://gyazo.com/928716ac23c95c6ea8c3d0639f6d64c4
2025/3/18、メンテナンスモードになった
Basics
Motivation
Installation
Getting Started
Adapting based on props
Extending styles
Styling any component
Passed props
Coming from CSS
Attaching additional props
Animations
React Native
Advanced
Theming
Refs
Security
Existing CSS
Tagged Template Literals
Server Side Rendering
Referring to other components
Style Objects
API Reference
Primary
Helpers
Test Utilities
Supported CSS
TypeScript
Previous APIs
Tooling
Babel Plugin
SWC Plugin
Babel Macro
TypeScript Plugin
Jest Integration
Stylelint
Styled Theming
Syntax Highlighting
styled()で拡張したうえで、
更に追加のpropsを指定する方法はない？
既存のComponent Aを拡張してconst A_ = styled(A)を作る際に
A_固有のprops isHogeを追加できない
できるけど、型の書き方が不明
with Typescript
styled-componentsはnode_modulesからではなく自作のsrc/Theme/index.tsxから読み込む
他の要素で作成したコンポーネントを別要素として使う
code:ts
const GrayArea = styled.div`
color:white;
`
export default () => <React.Fragment>
// divで作ったが↓ buttonとして使いたい
<GrayArea as='button' onClick={() => alert('It works!')}>
Hello React
</GrayArea>
</React.Fragment>
code:ts
<div
css={`
background: papayawhip;
color: ${props => props.theme.colors.text};
`}
/>k
<Button
css="padding: 0.5em 1em;"
/>