Introduction
Styling is the most important part of web development. In this article, we will learn how to efficiently consume CSS in our Typescript file.
CSSType
This is an npm package available in the npm repository handle styled attribute in an HTML element.
Installation:
npm i csstype
Necessary imports:
import * as CSS from 'csstype';
Properties are categorized into different uses and in several technical variations to provide typings that suit as many as possible. The good part is that it supports IntelliSense.
| Default |
Hyphen |
Fallback |
HyphenFallback |
|
| All |
Properties |
PropertiesHyphen |
PropertiesFallback |
PropertiesHyphenFallback |
| Standard |
StandardProperties |
StandardPropertiesHyphen |
StandardPropertiesFallback |
StandardPropertiesHyphenFallback |
| Vendor |
VendorProperties |
VendorPropertiesHyphen |
VendorPropertiesFallback |
VendorPropertiesHyphenFallback |
| Obsolete |
ObsoleteProperties |
ObsoletePropertiesHyphen |
ObsoletePropertiesFallback |
ObsoletePropertiesHyphenFallback |
| Svg |
SvgProperties |
SvgPropertiesHyphen |
SvgPropertiesFallback |
SvgPropertiesHyphenFallback |
Categories
- All - Includes Standard, Vendor, Obsolete and SVG
- Standard - Current properties and extends subcategories StandardLonghand and StandardShorthand (e.g. StandardShorthandProperties)
- Vendor - Vendor prefixed properties and extends subcategories VendorLonghand and VendorShorthand (e.g. VendorShorthandProperties)
- Obsolete - Removed or deprecated properties
- SVG - SVG-specific properties
Variations
- Default - JavaScript (camel) cased property names
- Hyphen - CSS (kebab) cased property names
- Fallback - Also accepts an array of values e.g. string | string[]
Examples
Using default Properties:
var divStyle: CSS.Properties = {
minHeight:'auto',
maxHeight:'500px'
};
By default, it only supports a string if we need to pass number literals.
var divStyle: CSS.Properties<string | number> = {
minHeight:'auto',
maxHeight:'500px',
padding:10
};
We can consume this in our tsx file with the following:
<div style={divStyle}> </div>
Sometimes, we need to pass array of values for CSS that uses PropertiesFallback:
const divStyle: CSS.PropertiesFallback<string | number> = {
display: ['-webkit-flex', 'flex'],
color: 'white',
padding:10
};
Sometimes, there is an need for pseudo selectors, in that case:
const divStyle: { [P in CSS.SimplePseudos]?: CSS.Properties } = {
':hover': {
display: 'flex',
},
};
It also support hyphen case, this will implemented by:
interface Style extends CSS.Properties, CSS.PropertiesHyphen {}
const mydivstyle: Style = {
'flex-grow': 1,
'flex-shrink': 0,
'font-weight': 'normal',
backgroundColor: 'white',
'padding':'10 10 10 10'
};
typestyle
This is also an npm package available in the npm repository. By using this package, we can write CSS in a typescript file.
Installation
npm i typestyle
Necessary imports:
import { style,stylesheet } from "typestyle";
Similar to the style attribute, we can assign classCss to className using the style method in typestyle, e.g.
const myclassname = style({paddingLeft: 'red',marginLeft:'10px'});
We can consume this in our tsx file with:
<div className={myclassname}> </div>
Concept - Mixin
A mixin is an object that contains properties for reuse.
The style function can take multiple objects. This makes it easy to reuse simple style objects, e.g.
const redMaker = {color:'red'};
const bigFont = {fontSize: '50px'};
const bigRedClass = style(
redMaker,
bigFont
);
<div className={bigRedClass}>Hello world</div>
Concept - Interpolation
You can nest properties for different selectors using the $nest property. Any & in a key for $nest gets replaced with the generated class name when its written to CSS. For example, it allows super simple CSS pseudo class (&:hover, &:active, &:focus, &:disabled) customization. It also allows you to use pseudo-elements ,(e.g. ::after, &::before etc):, child selectors.
const mycolors = style({
transition: 'color .2s',
color: 'blue',
$nest: {
'&:hover': {
color: 'red'
},
'&::before': {
content:'Hello '
} , '&>*': {
marginBottom: 10,
},
'&>*:last-child': {
marginBottom: '0px',
}
}
});
<h1 className={mycolors }world</h1>
//output be Helloworld
Sometimes we need to implement the whole CSS file in the component. That can be achieved with the stylesheet class:
Implementation sample:
const myButton = {
border: 'solid thin red',
borderRadius: 2,
color: 'white',
padding: '4px 10px'
};
const css = stylesheet({
component: {
display: 'flex'
},
primaryButton: {
backgroundColor: 'darkblue',
...myButton
},
secondaryButton: {
backgroundColor: 'teal',
...myButton
}
});
<div className={css.component}>
<button className={css.primaryButton}>Primary</button>
<button className={css.secondaryButton}>Secondary</button>
</div>
Conclusion
In this article, we learned various types of CSS implementation in SPFx. I hope this helps someone. Happy coding :)