Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/corllete/material-styled
Styled Components implementation of Material Design
https://github.com/corllete/material-styled
material-design material-ui react styled-components
Last synced: 10 days ago
JSON representation
Styled Components implementation of Material Design
- Host: GitHub
- URL: https://github.com/corllete/material-styled
- Owner: corllete
- License: other
- Created: 2018-03-01T11:10:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T01:21:44.000Z (almost 2 years ago)
- Last Synced: 2024-11-02T14:49:42.916Z (14 days ago)
- Topics: material-design, material-ui, react, styled-components
- Language: JavaScript
- Size: 3.55 MB
- Stars: 1
- Watchers: 3
- Forks: 3
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Material Styled Components
## Fork details
This repo is a independently managed fork of [MerlinLabs/styled-material-components](https://github.com/MerlinLabs/styled-material-components).
The goals:
- More strict eslint rules
- PropTypes for documenting and monitoring components behaviour
- Tests (coming soon) via Jest
- Use latest and greatest versions of **React** and **styled-components**
[Styled Components](https://www.styled-components.com) inspired library that implements Material Design for stress free React Application scaffolding.
## Table of Contents
0. [Inspiration and goals](#inpiration-and-goals)
0. [Getting Started](#getting-started)
0. [Contributing](#contributing)
0. [How to use](#how-to-use)
0. [Theme Provider](#theme-provider)
0. [Component Example](#component-example)
0. [Decorator Example](#decorator-example)
## Inspiration and goals
1. [Styled Components](https://www.styled-components.com) is a great way to couple components with styles.
2. [Material Components](https://github.com/material-components/material-components-web) is the best implementation of material design spec (it is google afterall)
3. We want a native react implementation of the above, and Styled Components gives us that power.
4. Sass Mixins can be mostly written as styled component mixins. See src/mixins/ for examples of this.
## Getting Started
* Fork the repo
* Run:
```
yarn install
yarn build
yarn dev
```
* Open http://localhost:8081 in your browser
## Contributing
* Check out our [Contributing Guide](https://github.com/corllete/material-styled/blob/master/CONTRIBUTING.md)
* Please follow the [Code of Conduct](https://github.com/corllete/material-styled/blob/master/CODE_OF_CONDUCT.md)
## How to use
The components in this library are Styled Components and have full access to the Style Components v3 api. That means you can call .extend on any of the exported components to modify the styling of everything within the component.
### Theme Provider
Similar to the Styled Components ThemeProvider (its a thin wrapper around it) except that it provides a default theme that matches material design's default theme. You can provide a custom theme here with any option from src/theme/defaultTheme.js overwritten. You can nest ThemeProviers just like with StyledComponents to overwrite portions of the theme for sections of your application
### Component Example
#### Button
This component is for creating a material design button. It has props that match the documentation from [Material Components](https://github.com/material-components/material-components-web)
Example Implementation:
```js
// Flat button with primary text color
I’m a Button
// Flat button with accent text color
I’m a Button
// Raised button with primary background color
I’m a Button
```
### Decorator Example
#### withRipple
This is a decorator (higher order component) to add a javascript ripple effect to any element that is a styled component. (it must have the .extend function).
```js
const JSRippleButton = withRipple(Button);
Test
```