, ? , . , CSS JS, “ ”. , , styled-components-. , , : “ ” . styled-system :
<font color="red" face="Verdana" size="+1">
<b></b> <i> </i>?
</font>
, , . CSS . . , .
:
import {render} from 'react-dom'
import {Title} from './styles.scss'
render(
<Title color='tomato' size='small'>
Hello world!
</Title>,
document.getElementById('app')
)
styles.scss
/**
@tag: h1
@component: Title
size: small | medium | large
color: #38383d --color
*/
.title {
--color: #38383d;
color: var(--color);
font-size: 18px;
&.small {
font-size: 14px;
margin: 2px 0;
}
&.medium {
font-size: 18px;
margin: 4px 0;
}
&.large {
font-size: 20px;
margin: 6px 0;
}
}
, :
import {Title} from './styles.scss'
, . JSDocs, CSSDocs. , .
, :
CSS type: primary | secondary | link
, , .
, , webpack loader :
npm install @stylin/style npm install --save-dev @stylin/msa-loader
, ! , TypeScript, - . :
webpack loader .
npm install --save-dev @stylin/ts-loader
43 , . , . runtime , CSS .
, .
Stylin 30% styled-components, styled-components !
:
componentPropertyName: default-value --css-variable
/**
@tag: button
@component: SexyButton
width: 150px --btn-width
*/
.sexy-button {
--btn-width: 150px;
width: var(--btn-width);
}
/* JSX */
<SexyButton width='180px'>
Love me
</SexyButton>
CSS , , . , - ( sandbox FS), .
そうそう、私はほとんど忘れていました。暗いテーマを明るいテーマに、またはその逆に切り替えると、アプリケーション全体が再描画されない(reactレンダリング)ことに気付くでしょう。これはある種の魔法です!
当然、既存のコンポーネントのスタイルを変更することは可能です。
import {Button} from 'antd'
import {appleStyle} from './style.scss'
// sexy-button is css-class
const StyledButton = appleStyle(`sexy-button`, Button)
<StyledButton type='dashed'>
Love me
</StyledButton>
このライブラリのすべての可能性について喜んでお話ししたいと思いますが、PR:Dに来たようには見えたくありません。私はあなたの痛みを取り除き、あなたの批判/提案に耳を傾けるためにここにいるだけです。next.jsやpreactのようなお気に入りのフレームワークにこのようなバラライカを喜ばせていただけますか?
さようなら、試薬に気をつけて、気をつけて!