styled components rhythm
1.0.0
12px垂直節奏，正確對齊基線
精美對齊的類型，帶有樣式的組件
npm i @ceteio/styled-components-rhythm
或者，用紗線：
yarn add @ceteio/styled-components-rhythm
import { ThemeProvider , injectGLobal } , styled from 'styled-components' ;
import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;
const rhythm = styledComponentsRhythm ( {
baseFontSize : 1 , // 1rem. Browser default makes this 16px
baseLineHeight : 1.2 , // unitless line-height, see: https://css-tricks.com/almanac/properties/l/line-height/#comment-1587658
rhythmHeight : 0.75 , // rem units. With browser default, this is 16px * 0.75rem == 12px
capHeights : {
// Calculated with https://codepen.io/sebdesign/pen/EKmbGL?editors=0011
Lato : 0.72 ,
} ,
debug : true ,
} ) ;
injectGLobal `
/* Reset global margins and padding */
h1, p {
margin: 0;
padding: 0;
}
/* Using Lato font https://fonts.google.com/specimen/Lato */
@import url('https://fonts.googleapis.com/css?family=Lato')
${ rhythm . global ( ) }
` ;
const H1 = styled . h1 `
${ props => props . theme . setFontWithRhythm ( 'Lato' , 3 ) }
margin-top: ${ props => props . theme . rhythmSizing ( 3 ) } rem;
` ;
const Paragraph = styled . p `
${ props => props . theme . setFontWithRhythm ( 'Lato' , 1 ) }
margin-top: ${ props => props . theme . rhythmSizing ( 2 ) } rem;
` ;
export default ( ) => (
< ThemeProvider theme = { rhythm . theme } >
< H1 > Hello world </ H1 >
< Paragraph > How are you today? </ Paragraph >
< Paragraph > Feeling quite < em > aligned </ em > ! </ Paragraph >
</ ThemeProvider >
) ; 主要導出是返回適合添加到樣式組件<ThemeProvider>節奏對象的函數：
import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;
const rhythm = styledComponentsRhythm ( options ) ;
// { theme: ..., global: ... } options （ Object ）baseFontSize （ Number ）：root元素的rem字體大小（即; the <body> ）。rhythmHeight （ Number ）： rem垂直網格大小，文本將其基線對齊。當它均勻分成（ baseFontSize * defaultLineHeight ）時，最有效。capHeights （ Object ）： font-family字體名稱 - >大寫字母的比例高度。可以使用此工具來計算高度。例如： {
Lato : 0.72 ,
}defaultLineHeight （ Number ）：下面的setFontWithRhythm()默認值。必須是無單位值，這將是相對於元素的字體大小。debug （ Boolean ）：將向身體注入紅色水平線以進行視覺調試對齊。defaultOutputType （ String ）：設置setFontWithRhythm()和global()的輸出類型。 'string' ：返回CSS字符串。 'object' ：返回CSS樣式對象。默認值： 'string' 。難題有兩塊，必須將兩種都用來具有有效的垂直節奏。 rhythm.theme和rhythm.global ：
import styledComponentsRhythm from '@ceteio/styled-components-rhythm' ;
import { injectGlobal , ThemeProvider } from 'styled-components' ;
const rhythm = styledComponentsRhythm ( options ) ;
injectGlobal ` ${ rhythm . global ( ) } ` ;
return < ThemeProvider theme = { rhythm . theme } > ... </ ThemeProvider > ; theme （ Object ）將此對像傳遞給樣式的組件ThemeProvider作為主題：
const rhythm = styledComponentsRhythm ( options ) ;
return < ThemeProvider theme = { rhythm . theme } > ... </ ThemeProvider > ; global([outputType]) => String包含需要應用的全局CS的字符串。最好使用樣式組件的injectGlobal完成：
const rhythm = styledComponentsRhythm ( options ) ;
injectGlobal ` ${ rhythm . global ( ) } ` ;或情感的<Global>組成部分：
< Global styles = { rhythm . global ( 'object' ) } />參數
outputType （ String ）： 'string' ：返回CSS字符串。 'object' ：返回CSS樣式對象。默認值： defaultOutputType的值。現在，您可以通過樣式組件中的theme道具訪問以下內容：
rhythmHeight創建主題對象時傳遞的值。
setFontWithRhythm(fontName, fontSizeRem[, desiredLineHeight[, outputType]]) => String將生成必要的CSS的主要函數將字體正確對齊與節奏基線。
此功能是2個假設：
padding-top或margin-bottom 。參數
fontName （ String ）：應像您在CSS屬性font-family中聲明的字體名稱匹配。fontSizeRem （ Number ）： baseFontSize的倍數。desiredLineHeight （ Number ）：將四捨五入到最近的節奏線上，因此您不必擔心。outputType （ String ）： 'string' ：返回CSS字符串。 'object' ：返回CSS樣式對象。默認值： defaultOutputType的值。輸出是添加到組件的CSS字符串：
const H1 = styled . h1 `
${ props => props . theme . setFontWithRhythm ( 'Lato' , 3 ) }
` ;或作為使用CSS道具的對象（在樣式的組件和情感中）：
const H1 = props => (
< h1 css = { theme => theme . setFontWithRhythm ( 'Lato' , 3 , 1 , 'object' ) } />
) ; rhythmSizing(multiple) => Number一個簡單的助手來計算multiple * rhythmHeight 。
非常適合設置邊距或填充：
const H1 = styled . h1 `
margin-top: ${ props => props . theme . rhythmSizing ( 3 ) } rem;
` ; capsize ： “使用字體元數據，現在可以根據其大寫字母的高度進行尺寸，同時修整大寫字母以上的空間和基線之下。”basekick是同一事物的另一個實施，其針對性更少。
