-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Typography] Can we extend Typography? #8498
Comments
@klauszhang This is an interesting proposal but I'm afraid it won't make it given the Instead, we encourage people to write their own wrapping components on top of Material-UI import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from 'material-ui/styles'
import { capitalize } from 'material-ui/utils/helpers'
import MuiTypography from 'material-ui/Typography'
const styles = theme => ({
markedDisplay3Center: {
height: 4,
width: 73,
display: 'block',
margin: `${theme.spacing.unit}px auto 0`,
background: theme.palette.secondary.main,
},
markedDisplay2Center: {
height: 4,
width: 55,
display: 'block',
margin: `${theme.spacing.unit}px auto 0`,
background: theme.palette.secondary.main,
},
markedDisplay1Center: {
height: 4,
width: 55,
display: 'block',
margin: `${theme.spacing.unit}px auto 0`,
background: theme.palette.secondary.main,
},
markedTitleLeft: {
height: 2,
width: 28,
display: 'block',
marginTop: theme.spacing.unit / 2,
background: 'currentColor',
},
})
const headlineMapping = {
display4: 'h1',
display3: 'h1',
display2: 'h1',
display1: 'h1',
headline: 'h3',
title: 'h2',
subheading: 'h3',
body2: 'aside',
body1: 'p',
}
function Typography(props) {
const { children, classes, marked, variant, ...other } = props
return (
<MuiTypography headlineMapping={headlineMapping} variant={variant} {...other}>
{children}
{marked ? (
<span className={classes[`marked${capitalize(variant) + capitalize(marked)}`]} />
) : null}
</MuiTypography>
)
}
Typography.propTypes = {
children: PropTypes.node,
classes: PropTypes.object.isRequired,
marked: PropTypes.oneOf([false, 'center', 'left']),
variant: PropTypes.string,
}
Typography.defaultProps = {
marked: false,
}
export default withStyles(styles)(Typography) An alternative solution would be to expose a component factory where people can define their own type. |
We will think about this in the future if there is a strong signal for using this pattern. Please up vote the issue if you think so. I'm closing for now. |
Your suggested approach seems not to work anymore. When I try to follow it I get the desired result but with nasty error messages:
Any suggestions how to add own type styles tat can be used in the way like yours:
Thank you in advance showing me the right direction. |
@PDXIII I have updated the example. But I believe you didn't copy paste the example in the first place. |
For anyone who needs another example, this is my implementation. It is my own import React from 'react';
import PropTypes from 'prop-types';
import { mapValues } from 'lodash';
import { makeStyles } from '@material-ui/core/styles';
import MuiTypography from '@material-ui/core/Typography';
const variantMapping = {
'2xl': {
element: 'h1',
styles: {
primary: {
fontSize: 81,
lineHeight: '120%',
letterSpacing: '-2px',
},
secondary: {
fontSize: 81,
lineHeight: '120%',
letterSpacing: 0,
},
},
},
xl: {
element: 'h2',
styles: {
primary: {
fontSize: 54,
lineHeight: '120%',
letterSpacing: '-1px',
},
secondary: {
fontSize: 54,
lineHeight: '120%',
letterSpacing: 0,
},
},
},
lg: {
element: 'h3',
styles: {
primary: {
fontSize: 36,
lineHeight: '120%',
letterSpacing: '-0.75px',
},
secondary: {
fontSize: 36,
lineHeight: '120%',
letterSpacing: 0,
},
},
},
md: {
element: 'h4',
styles: {
primary: {
fontSize: 24,
lineHeight: '130%',
letterSpacing: '-0.5px',
},
secondary: {
fontSize: 24,
lineHeight: '140%',
letterSpacing: 0,
},
},
},
sm: {
element: 'p',
styles: {
primary: {
fontSize: 16,
lineHeight: '140%',
letterSpacing: 0,
},
secondary: {
fontSize: 16,
lineHeight: '140%',
letterSpacing: 0,
},
},
},
xs: {
element: 'h5',
styles: {
primary: {
fontSize: 14,
lineHeight: '140%',
letterSpacing: 0,
},
secondary: {
fontSize: 14,
lineHeight: '140%',
letterSpacing: 0,
},
},
},
'2xs': {
element: 'h6',
styles: {
primary: {
fontSize: 12,
lineHeight: '140%',
letterSpacing: 0,
},
secondary: {
fontSize: 12,
lineHeight: '140%',
letterSpacing: 0,
},
},
},
};
const useStyles = makeStyles(theme => ({
root: ({ variant, isBold, font }) => {
const baseStyles = {
fontWeight: isBold ? 700 : 'normal',
fontFamily: font === 'secondary' ? ['"Lora"', 'sans-serif'].join(',') : null,
};
const variantStyles = variantMapping[variant].styles[font];
return { ...baseStyles, ...variantStyles };
},
}));
function Typography({ children, variant, className, component, isBold, font }) {
const classes = useStyles({ variant, isBold, font });
return (
<MuiTypography
classes={classes}
variantMapping={mapValues(variantMapping, 'element')}
variant={variant}
component={component}
className={className}
>
{children}
</MuiTypography>
);
}
Typography.propTypes = {
children: PropTypes.node.isRequired,
classes: PropTypes.shape({
root: PropTypes.string.isRequired,
}).isRequired,
variant: PropTypes.oneOf(Object.keys(variantMapping)).isRequired,
component: PropTypes.string,
className: PropTypes.string,
isBold: PropTypes.bool,
font: PropTypes.oneOf(['primary', 'secondary']),
};
Typography.defaultProps = {
isBold: false,
component: null,
className: '',
font: 'primary',
};
export default Typography; |
@oliviertassinari I'm just now realizing that while my example above works well, it throws a proptype error: Invalid prop `variant` of value `md` supplied to `ForwardRef(Typography)`, expected one of ["h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","button","overline","srOnly","inherit"]. Is there any way I can get that error message not to appear? |
Duplicate of #15573 |
@oliviertassinari Can you provide me an example of the wrapper component you are referring to? I’m unsure how to implement that. Also, any idea when that fix will be in? Is it in development? |
Can we get an updated wrapper example? |
Should Typography extended while providing extra properties in theme > typography
Expected Behavior
When provide extra property in createMuiTheme > typography, it should be able to access in
type
ofTypography
Current Behavior
Not supported
Steps to Reproduce (for bugs)
em... consider this as a feature request. we should be able to do something like following
Context
usually people would use
Roboto
along withRoboto Condensed
orNoto
to create a Title > Content pairYour Environment
The text was updated successfully, but these errors were encountered: