Material-ui: Material Design Typography

[paglias]

I've just discovered this library and I'm trying to understand how should I implement material styled typography for elements like <p> <span> <h1> h2>..... In particular regarding font, font size, colors...

Should I load another material design css library just for this?

[davide-ganito]

I'm interested in this too.

[c0b41]

http://www.getmdl.io/index.html

[paglias]

No hope of getting this directly into material-ui? Having to load the font twice and maintaining separate CSS typography rules up to date with the ones used by material-ui isn't the best thing

[oliviertassinari]

You could use

• https://github.com/callemall/material-ui/blob/master/src/styles/colors.js
• https://github.com/callemall/material-ui/blob/master/src/styles/typography.js

The typography one is missing a lot of properties. https://github.com/binggg/react-native-material-design-styles Is also interesting.

[jmjpro]

MUI typography should export Google's MUI font styles such as display4, display3, subhead... etc the same way it MUI already exports Google's MUI colors.

[achtan]

so how exactly are you solving this 'thing' right now?
add example code pls

[tonytonyjan]

My solution:

$ npm i material-design-lite -S

use webpack to import styles:

import 'material-design-lite/src/typography/_typography.scss'

[smeijer]

Are there really no better solutions than the one @tonytonyjan suggests?

[oliviertassinari]

We have a new <Text /> component on the next branch implementing the material typography system. For instance, here is the documentation typography.md.

[MrLoh]

Is that already available today somehow, I don't get it even under "material-ui": "^0.16.0-alpha".

[oliviertassinari]

It's under the next branch. It's not published on npm.

[tonytonyjan]

Another solution is to use material-components-web which is the successor to material-design-lite.

[damianobarbati]

@oliviertassinari what about the aforementioned <Text />? Is it usable right now?
When is the next branch going to have birth?

[oliviertassinari]

@damianobarbati I'm using it on some projects. We have released an alpha version. People can try it out.

[amannn]

Until next is stable, I've back-ported the <Text /> component to the current version. Here's the gist if it's helpful to somebody: https://gist.github.com/amannn/267ab88b4d6b0550a7f920f9417bdfd7. It uses SASS and CSS modules, but it should be easy to get rid of those if you don't use them.

[oliviertassinari]

Thanks for sharing it :+1:.

[amannn]

Btw. I just noticed that Text is already available on the global scope in browsers. It might be worth considering a different name like Font to avoid confusion.

It also has the effect that a linter doesn't complain if you try to use it without importing. React also prints a different warning Uncaught TypeError: Failed to construct 'Text': Please use the 'new' operator, this DOM object constructor cannot be called as a function. which is somehow misleading.

[mbrookes]

@amannn Good spot. Please open a new issue for this. Thanks!

[oliviertassinari]

@amannn Thanks for the feedback. What about calling it Typography? But @mbrookes is right, please open another issue to deal around that topic.

[amannn]

I like Typography! I've opened another issue: #6283