CSS-only Material Design primitives for Preact
MIT License
.
npm install --save solids preact-solids
Inside your Preact components, import the preact-solids
component you want to use and use it in the JSX. Assuming you are not using CSS Modules, you also import the styles from solids
that correspond with the components you are using. Don't forget to import solids/solids
and render the solids
context element:
import { h } from 'preact'
import AppBar from 'preact-solids/appbar'
import 'solids/solids'
import 'solids/appbar'
export const MyComponent = (props) => (
<div class="solids">
<AppBar prominent fixed shrink>
<p>AppBar</p>
</AppBar>
</div>
)
If you are using CSS Modules, you should make sure that you import all your solids components in one place and use that import as a theme provider:
routes/home/index.js
import { h } from 'preact';
import { Provider } from 'preact-solids/theme';
import AppBar from 'preact-solids/appbar';
import classes from './style';
export const Home = () => (
<Provider value={{ classes }}>
<AppBar>
<p>Solids</p>
</AppBar>
</Provider>
);
export default Home;
routes/home/styles.scss
@import "solids/solids";
@import 'solids/appbar';
/* other styles */
Preact solids components load the default class names from solids, but listen for alternatives using a Theme consumer. If such alternatives are supplied to the components using a Theme provider like in the example above, it will use those class names instead of the defaults.
For now, have a look at the solids-www project for some examples on how to use solids
and preact-solids
components in an app generated with Preact CLI.
Add an issue in the issue tracker to let me know of any problems you find, or questions you may have.
Credits go to:
2019 by Stijn de Witt. Some rights reserved.