styled-components
https://gyazo.com/928716ac23c95c6ea8c3d0639f6d64c4
2023/6/28
@typesを入れんで良くなった
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
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;"
/>