preact-mwc-styled

Automatically styles preact-material-components (needs to be used with something like webpack)

Usage

If you don't use sass:

1module.exports = {
2    // [...]
3    rules: [
4        {
5            test: {
6                test: /\.scss$/,
7                and: /^node_modules\/precat-mwc-styled/
8            },
9            use: [
10                {loader: "style-loader"},
11                {loader: "css-loader"},
12                {
13                    loader: "postcss-loader", options: {
14                        plugins: [
15                            require("postcss-custom-properties")({strict: false, preserve: true}),
16                            require("autoprefixer")
17                        ]
18                    }
19                },
20                {loader: "sass-loader", options: {includePaths: ["./node_modules"]}},
21                {loader: "sass-resources-loader", options: {resources: "<path to your theme>"}}
22            ]
23        }
24        // [...]
25    ]
26    // [...]
27}

If you use sass:

1module.exports = {
2    // [...]
3    rules: [
4        {
5            test: {
6                test: /\.scss$/,
7                and: [/node_modules\/precat-mwc-styled\//]
8            },
9            use: [
10                {loader: "style-loader"},
11                {loader: "css-loader"},
12                {
13                    loader: "postcss-loader", options: {
14                        plugins: [
15                            require("postcss-custom-properties")({strict: false, preserve: true}),
16                            require("autoprefixer")
17                        ]
18                    }
19                },
20                {loader: "sass-loader", options: {includePaths: ["./node_modules"]}},
21                {loader: "sass-resources-loader", options: {resources: "<path to your theme (see Theming)>"}}
22            ]
23        },
24        {
25            test: {
26                test: /\.scss$/,
27                exclude: /node_modules\//
28            },
29            use: [
30                // Your scss processing
31            ]
32        }
33        // [...]
34    ]
35    // [...]
36}

Notes on webpack

You need to install style-loader, css-loader, postcss-loader, postcss-custom-properties, autoprefixer, sass-loader and sass-resources-loader for this config to work are automatically installed by this package.

You can add more postcss plugins or remove autoprefixer, removing postcss-custom-properties is possible, but not recommended.

You can remove style-loader but it is recommended to use it. Insert on use (/usable) is optional, try what works for you. You should prerender the site in production (If this library is good enough for your use case, it's currently not well tested)

Why do I need to use these loaders?

• style-loader: Inserts the css for the components into DOM. Can be replaced with extract-loader in production.
• css-loader: See sass-loader documentation
• postcss:
  • postcss-custom-properties: To "compile" your theme into the css (Especially for browsers that do not support CSS custom properties)
  • autoprefixer: cross-browser support
• sass-loader: This project uses sass, absolutely needed
• sass-resources-loader: To insert your theme mixins into the component stylesheets

Using them in code

Just use them like:

1import {Component, h} from "preact";
2import Button from "preact-mwc-styled/Button";
3
4export default class App extends Component {
5    render() {
6        return <Button primary ripple>I am a Button</Button>
7    }
8}

This project is fully TypeScript compatible! (Because it's written in TypeScript)

For documentation of the components refer to preact-material-components and their docs.

Theming

To use your custom theme, just create a custom theme sass file like this:

1$mdc-theme-primary: #6200ee; // primary color
2$mdc-theme-on-primary: #000000; // text color on primary component
3
4$mdc-theme-secondary: #018786; // secondary color
5$mdc-theme-on-secondary: #000000; // text color on secondary component
6
7// Uncommon that you need this ones
8$mdc-theme-background: #ffffff;
9
10$mdc-theme-surface: #ffffff;
11$mdc-theme-on-surface: #000000;

And reference it from sass-resources-loader. Just insert the variables you need into your theme file.

For assistance on choosing colors there is the material color tool.

You can also override material classes in there.