This is an example of a product feedback form using only MDC React components. This also uses some MDC Web-only packages, which are just styles (typography, theme, and shape).
MDC Web Package | Description |
---|---|
Typography | - Set messaging text (font-size, line-height, etc.) |
Theme | - Set messaging ink color |
Shape | - Set Chip corner shape |
starting from root directory (
/material-components-web-react
)
cd ./examples/roses
npm i
npm start
- in web browser, head to
localhost:8080
(may be different if you have another web server running, such as the screenshot tests)
NOTE: Ensure that you're on at least NodeJS version 10.4.x
If you want to see MDC Web's Themeing power in action, head to the ./examples/roses/index.scss
file, and uncomment the first line below the license (line 23):
$mdc-theme-primary: #b31839; // uncomment for alternate primary theme color
This will update the primary color for the app. Just refresh the page and allow the Sass to recompile with #b31839 as the primary color. Feel free to experiment!x