Article directory
foreword
记录typescript对自定义CSS样式的用法：- reference link
1. Usage scenarios
- Write CSS styles in the form of objects
- Limit the number and name of rules in a style sheet
- Partial and Record use
2. Start editing
1. Create the content scope of the css rule
// <const>只读的
const styleName = <const>['form', 'lang', 'action', 'input', 'center'];
2. Create a checksum for each style sheet
2.1
- Limit the scope of the key in each rull, that is, use the content of styleName as the key of the object
- Keys: styleName[0] means 'form'
//限定每个rull中的key的范围，即以styleName的内容作为对象的key
//Keys：styleName[0]则表示'form'
export type Keys = typeof styleName[number];
2.2
- Record indicates that there are multiple contents with the same format and similar content, and Partial indicates that it is optional.
- Record<Keys,Partial> indicates that the content format of Istyle is:
- A sequence object composed of an item in styleName as key and CSSStyleDeclaration as value
//Record表示拥有多个格式相同类似的内容，Partial表示为可选的。
//Record<Keys,Partial<CSSStyleDeclaration>> 表示Istyle的内容格式为：
//以styleName中的某一项为key，CSSStyleDeclaration为value组成的序列对象
export type Istyle = Partial<Record<Keys, Partial<CSSStyleDeclaration>>>;
2.3
//示例
export const logo = {
form: {
width: '25%',
minWidth: '200px',
maxWidth: '400px',
margin: 'auto',
},
lang: {
textAlign: 'right' },
action: {
textAlign: 'center',
marginTop: '60px',
},
input: {
borderRadius: '4px',
border: '1px solid black',
},
};
3. Complete data
// export enum StyleName { form = "form", lang = "lang", action = "action", input = "input", }
const styleName = <const>['form', 'lang', 'action', 'input', 'center'];
export type Keys = typeof styleName[number];
export type Istyle = Partial<Record<Keys, Partial<CSSStyleDeclaration>>>;
export const logo = {
form: {
width: '25%',
minWidth: '200px',
maxWidth: '400px',
margin: 'auto',
},
lang: {
textAlign: 'right' },
action: {
textAlign: 'center',
marginTop: '60px',
},
input: {
borderRadius: '4px',
border: '1px solid black',
},
};
export const lt: Istyle = {
form: {
width: '25%',
minWidth: '200px',
maxWidth: '400px',
margin: 'auto',
marginTop: '-20px',
},
lang: {
textAlign: 'right' },
action: {
textAlign: 'center',
},
input: {
borderRadius: '4px',
border: '1px solid #0084c0',
},
};
export const nologo: Istyle = {
form: {
width: '25%',
minWidth: '200px',
maxWidth: '400px',
margin: 'auto',
},
lang: {
textAlign: 'right' },
action: {
textAlign: 'center',
},
input: {
borderRadius: '4px',
border: '1px solid black',
},
};
export const allStyle = {
logo, lt, nologo };