@taktikal/stylesheets
Abstractions for CSS-in-JS with theming support in React projects.
Defining styles
// Button.styles.ts
import { StyleParams } from "@taktikal/stylesheets";
export default ({ css, theme }: StyleParams) => ({
button: css`
color: ${theme.colorPrimary};
background: ${theme.colorOffWhite};
margin: 0 auto;
&--primary {
color: ${theme.colorOffWhite};
background: ${theme.colorPrimary};
}
`;
});Usage in functional components
// Button.tsx
import React from "react";
import { useStylesheet } from "@taktikal/stylesheets";
import styles from "./Button.styles";
interface Props {
boolean?: primary;
}
export const Button: React.FC<Props> = props => {
const s = useStylesheet(styles);
const { primary = false } = props;
return (
<button className={s("button", { primary })}>
Click me
</button>
)
};Usage in class components
Using class components is discouraged, components should be functional if possible.
But for some legacy or sufficiently complex components, classes may be the best option. @taktikal/stylesheets supports class components, but the API is much less elegant.
// Button.tsx
import React from "react";
import { withStylesheetContext, StylesheetProps } from "@taktikal/stylesheets";
import styles from "./Button.styles";
interface Props extends StylesheetProps<typeof styles> {
boolean?: primary;
}
class ButtonComponent extends React.Component<Props> {
public render() {
const s = this.props.getClassName;
const { primary = false } = this.props;
return (
<button className={s("button", { primary })}>
Click me
</button>
);
}
}
export const Button = withStylesheetContext(styles, ButtonComponent);Setup
Emotion peer dependencies
This package has the following peer dependencies. They must be installed alongside @taktikal/stylesheets.
{
"emotion": "10.x",
"emotion-server": "10.x"
}Theme provider
The StylesheetContext.Provider must be included above components that make use of @taktikal/stylesheets in your app.
The value that the provider receives is the theme of your app. By default the theme is empty, but you can add more as described in the Add theme variables section.
import React from "react";
import { StylesheetContext } from "@taktikal/stylesheets";
interface Props {
colorPrimary: string;
}
export const App: React.FC<Props> = props => {
const { colorPrimary } = props;
return (
<StylesheetContext.Provider value={{ colorPrimary }}>
...
</StylesheetContext.Provider>
);
};Server side rendering
If you are using SSR (server side rendering), you must use emotion-server's extractCritical like described in their documentation.
Theming
Theme
You can get the theme from StyleParams like so.
import { StyleParams } from "@taktikal/stylesheets";
export default ({ css, theme }: StyleParams) => ({
// ...
})By default, theme is an empty object.
Add theme variables
The CSSVariables interface defines theme. You can add dynamic variables to the theme by extending the CSSVariables interface like so:
// custom.d.ts
import "@taktikal/stylesheets";
declare module "@taktikal/stylesheets" {
export interface CSSVariables {
colorPrimary: string;
}
}In tsconfig.json, you should then add ./custom to the types field.
Once added you can use these variables like so:
import { StyleParams } from "@taktikal/stylesheets";
export default ({ css, theme }: StyleParams) => ({
button: css`
background: ${theme.colorPrimary};
`
})