styled-components
>#WIP
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 から読み込む型定義はstyled-components-react-nativeに変わったっぽい
他の要素で作成したコンポーネントを別要素として使う
tsconst GrayArea = styled.div`
background: #333;
color:white;
`
export default () => <React.Fragment>
// divで作ったが↓ buttonとして使いたい
<GrayArea as='button' onClick={() => alert('It works!')}>
Hello React
</GrayArea>
</React.Fragment>ts<div
css={`
background: papayawhip;
color: ${props => props.theme.colors.text};
`}
/>k
<Button
css="padding: 0.5em 1em;"
/>型エラーの修正 ref