Simplified integration between TypeStyle and React.
npm install --save typestyle-react
# or
yarn add typestyle-reacttype styled = (tag: string, ...properties: (NestedCSSProperties | ((props: {}) => NestedCSSProperties))[]) => React.Component;Create a React component with styles applied.
import { styled } from "typestyle-react";
const RedText = styled("span", {
color: "red"
});
// Renders a `<span class="…">…</span>`, where `class` is computed by TypeStyle.
let element = <RedText>Hello world!</RedText>;Components pass-through supported props, so they can be used the same as the unstyled originals.
element = <RedText id="my-red-text">Hello world!</RedText>;Caveats:
- If
classNameis passed, its value will be merged with the TypeStyle computed value. - Using
refwill expose the wrapped component, useinnerRefto access the inner element.
Styling can be parameterised, and be passed values via props. Instead of passing
an CSSNestedProperties object to styled, pass a function:
import { styled } from "typestyle-react";
const ColoredText = styled("span", (props: { color: string }) => ({
color: "red"
}));
// Styled props passed via the special `styled` prop.
let element = <ColoredText styled={{ color: "red" }}>Hello world!</ColoredText>;Hint: Don't confuse the styled prop with the native style prop.
type style = (...properties: NestedCSSProperties[]) => string;A wrapper around TypeStyle's style export that schedules forceRenderStyles() in a microtask.
import { style } from "typestyle-react";
const coloredTextStyle = style({
color: "red"
});
let element = <span className={coloredTextStyle}>Hello world!</span>;Styles are computed (via TypeStyle) when the component is rendered, and are immediately scheduled to be flushed to the DOM synchronously.