diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js index b4bd47f3be2c4d..4bd1bcdc397226 100644 --- a/docs/scripts/buildApi.js +++ b/docs/scripts/buildApi.js @@ -83,9 +83,11 @@ function buildDocs(options) { // eslint-disable-next-line global-require, import/no-dynamic-require const component = require(componentObject.filename); + const name = path.parse(componentObject.filename).name; const styles = { classes: [], name: null, + descriptions: {}, }; if (component.styles && component.default.options) { @@ -94,6 +96,29 @@ function buildDocs(options) { className => !className.match(/^(@media|@keyframes)/), ); styles.name = component.default.options.name; + + let styleSrc = src; + // Exception for Select where the classes are imported from NativeSelect + if (name === 'Select') { + styleSrc = readFileSync( + componentObject.filename.replace('Select/Select', 'NativeSelect/NativeSelect'), + 'utf8', + ); + } + + /** + * Collect classes comments from the source + */ + const stylesRegexp = /export const styles.*\n(.*\n)*};\n\n/; + const styleRegexp = /\/\* (.*) \*\/\n\s*(\w*)/g; + // Extract the styles section from the source + const stylesSrc = stylesRegexp.exec(styleSrc); + if (stylesSrc) { + // Extract individual classes and descriptions + stylesSrc[0].replace(styleRegexp, (match, desc, key) => { + styles.descriptions[key] = desc; + }); + } } let reactAPI; @@ -104,7 +129,7 @@ function buildDocs(options) { throw err; } - reactAPI.name = path.parse(componentObject.filename).name; + reactAPI.name = name; reactAPI.styles = styles; reactAPI.pagesMarkdown = pagesMarkdown; reactAPI.src = src; @@ -147,7 +172,7 @@ export default withRoot(Page); `, ); - console.log('Built markdown docs for', componentObject.filename); + console.log('Built markdown docs for', reactAPI.name); }); } diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js index d5dc7e9437f4d9..53c4b5957d2efd 100644 --- a/docs/src/modules/utils/generateMarkdown.js +++ b/docs/src/modules/utils/generateMarkdown.js @@ -239,11 +239,29 @@ function generateClasses(reactAPI) { throw new Error(`Missing styles name on ${reactAPI.name} component`); } + let text = ''; + if (Object.keys(reactAPI.styles.descriptions).length) { + text = ` +| Name | Description | +|:-----|:------------|\n`; + text += reactAPI.styles.classes + .map( + className => + `| ${className} | ${ + reactAPI.styles.descriptions[className] ? reactAPI.styles.descriptions[className] : '' + }`, + ) + .join('\n'); + } else { + text = reactAPI.styles.classes.map(className => `- \`${className}\``).join('\n'); + } + return `## CSS API You can override all the class names injected by Material-UI thanks to the \`classes\` property. This property accepts the following keys: -${reactAPI.styles.classes.map(className => `- \`${className}\``).join('\n')} + +${text} Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](${SOURCE_CODE_ROOT_URL}${normalizePath( diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js index 47cbdb5e9ba796..af0861b7f537bf 100644 --- a/packages/material-ui-lab/src/Slider/Slider.js +++ b/packages/material-ui-lab/src/Slider/Slider.js @@ -8,7 +8,7 @@ import ButtonBase from '@material-ui/core/ButtonBase'; import { fade } from '@material-ui/core/styles/colorManipulator'; import clamp from '../utils/clamp'; -export const style = theme => { +export const styles = theme => { const commonTransitionsOptions = { duration: theme.transitions.duration.short, easing: theme.transitions.easing.easeOut, @@ -29,7 +29,7 @@ export const style = theme => { }; return { - // /* Styles for root node */ + /* Styles applied to the root element. */ root: { position: 'relative', width: '100%', @@ -50,13 +50,14 @@ export const style = theme => { transform: 'scaleY(-1)', }, }, + /* Styles applied to the container element. */ container: { position: 'relative', '&$vertical': { height: '100%', }, }, - /* Tracks styles */ + /* Styles applied to the track elements. */ track: { position: 'absolute', transform: 'translate(0, -50%)', @@ -79,6 +80,7 @@ export const style = theme => { backgroundColor: colors.focused, }, }, + /* Styles applied to the track element before the thumb. */ trackBefore: { zIndex: 1, left: 0, @@ -88,6 +90,7 @@ export const style = theme => { backgroundColor: colors.primary, }, }, + /* Styles applied to the track element after the thumb. */ trackAfter: { right: 0, backgroundColor: colors.secondary, @@ -96,7 +99,7 @@ export const style = theme => { bottom: 0, }, }, - /* Thumb styles */ + /* Styles applied to the thumb element. */ thumb: { position: 'absolute', zIndex: 2, @@ -137,13 +140,20 @@ export const style = theme => { height: 17, }, }, + /* Class applied to the root element to trigger JSS nested styles if `reverse={true}` . */ + reverse: {}, + /* Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`. */ + disabled: {}, + /* Class applied to the track and thumb elements to trigger JSS nested styles if `jumped`. */ + jumped: {}, + /* Class applied to the track and thumb elements to trigger JSS nested styles if `focused`. */ focused: {}, + /* Class applied to the track and thumb elements to trigger JSS nested styles if `activated`. */ activated: {}, - disabled: {}, - zero: {}, + /* Class applied to the root, track and container to trigger JSS nested styles if `vertical`. */ vertical: {}, - reverse: {}, - jumped: {}, + /* Class applied to the thumb to trigger nested styles if `value` = `min` . */ + zero: {}, }; }; @@ -417,7 +427,7 @@ class Slider extends React.Component { [classes.activated]: !disabled && currentState === 'activated', }; - const rootClasses = classNames( + const className = classNames( classes.root, { [classes.vertical]: vertical, @@ -452,7 +462,7 @@ class Slider extends React.Component { return ( ({ +export const styles = theme => ({ + /* Styles applied to the root (`Tooltip`) component. */ root: { position: 'relative', }, + /* Styles applied to the `Button` component. */ button: { margin: 8, color: theme.palette.text.secondary, @@ -17,6 +19,7 @@ const styles = theme => ({ })}, opacity 0.8s`, opacity: 1, }, + /* Styles applied to the `Button` component if `open={false}`. */ buttonClosed: { opacity: 0, transform: 'scale(0)', @@ -127,4 +130,4 @@ SpeedDialAction.defaultProps = { open: false, }; -export default withStyles(styles)(SpeedDialAction); +export default withStyles(styles, { name: 'MuiSpeedDialAction' })(SpeedDialAction); diff --git a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js index 72a0532a5e284a..c20510d0fb6cfa 100644 --- a/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js +++ b/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js @@ -4,22 +4,26 @@ import classNames from 'classnames'; import { withStyles } from '@material-ui/core/styles'; import AddIcon from '../internal/svg-icons/Add'; -const styles = theme => ({ +export const styles = theme => ({ + /* Styles applied to the root element. */ root: { height: 24, }, + /* Styles applied to the icon component. */ icon: { transition: theme.transitions.create(['transform', 'opacity'], { duration: theme.transitions.duration.short, }), }, + /* Styles applied to the icon component if `open={true}`. */ iconOpen: { transform: 'rotate(45deg)', }, - // Style applied to the icon if there is an openIcon, when the SpeedDial is open + /* Styles applied to the icon when and `openIcon` is provided & if `open={true}`. */ iconWithOpenIconOpen: { opacity: 0, }, + /* Styles applied to the `openIcon` if provided. */ openIcon: { position: 'absolute', transition: theme.transitions.create(['transform', 'opacity'], { @@ -28,6 +32,7 @@ const styles = theme => ({ opacity: 0, transform: 'rotate(-45deg)', }, + /* Styles applied to the `openIcon` if provided & if `open={true}` */ openIconOpen: { transform: 'rotate(0deg)', opacity: 1, @@ -81,4 +86,4 @@ SpeedDialIcon.propTypes = { SpeedDialIcon.muiName = 'SpeedDialIcon'; -export default withStyles(styles)(SpeedDialIcon); +export default withStyles(styles, { name: 'MuiSpeedDialIcon' })(SpeedDialIcon); diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js index 16634e43e5e9bf..edcf3223c9c40b 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButton.js +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButton.js @@ -8,6 +8,7 @@ import { fade } from '@material-ui/core/styles/colorManipulator'; import ButtonBase from '@material-ui/core/ButtonBase'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { ...theme.typography.button, height: 32, @@ -28,26 +29,20 @@ export const styles = theme => ({ backgroundColor: 'transparent', }, }, - '&:not(:first-child)': { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, }, - '&:not(:last-child)': { borderTopRightRadius: 0, borderBottomRightRadius: 0, }, }, - label: { - width: '100%', - display: 'inherit', - alignItems: 'inherit', - justifyContent: 'inherit', - }, + /* Styles applied to the root element if `disabled={true}`. */ disabled: { color: fade(theme.palette.action.disabled, 0.12), }, + /* Styles applied to the root element if `selected={true}`. */ selected: { color: theme.palette.action.active, '&:after': { @@ -65,7 +60,6 @@ export const styles = theme => ({ backgroundColor: 'currentColor', opacity: 0.38, }, - '& + &:before': { content: '""', display: 'block', @@ -81,6 +75,13 @@ export const styles = theme => ({ opacity: 0.12, }, }, + /* Styles applied to the `label` wrapper element. */ + label: { + width: '100%', + display: 'inherit', + alignItems: 'inherit', + justifyContent: 'inherit', + }, }); class ToggleButton extends React.Component { diff --git a/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js b/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js index 361af634f13ffb..736eb4bb0d771b 100644 --- a/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js +++ b/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js @@ -6,13 +6,14 @@ import hasValue from './hasValue'; import isValueSelected from './isValueSelected'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { transition: theme.transitions.create('background,box-shadow'), background: 'transparent', borderRadius: 2, overflow: 'hidden', }, - + /* Styles applied to the root element if `selected={true}` or `selected="auto" and `value` set. */ selected: { background: theme.palette.background.paper, boxShadow: theme.shadows[2], diff --git a/packages/material-ui/src/AppBar/AppBar.js b/packages/material-ui/src/AppBar/AppBar.js index a601ed4627dfb1..2b0794c41222dc 100644 --- a/packages/material-ui/src/AppBar/AppBar.js +++ b/packages/material-ui/src/AppBar/AppBar.js @@ -12,6 +12,7 @@ export const styles = theme => { theme.palette.type === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]; return { + /* Styles applied to the root element. */ root: { display: 'flex', flexDirection: 'column', @@ -20,35 +21,42 @@ export const styles = theme => { zIndex: theme.zIndex.appBar, flexShrink: 0, }, + /* Styles applied to the root element if `position="fixed"`. */ positionFixed: { position: 'fixed', top: 0, left: 'auto', right: 0, }, + /* Styles applied to the root element if `position="absolute"`. */ positionAbsolute: { position: 'absolute', top: 0, left: 'auto', right: 0, }, + /* Styles applied to the root element if `position="sticky"`. */ positionSticky: { position: 'sticky', top: 0, left: 'auto', right: 0, }, + /* Styles applied to the root element if `position="static"`. */ positionStatic: { position: 'static', }, + /* Styles applied to the root element if `color="default"`. */ colorDefault: { backgroundColor: backgroundColorDefault, color: theme.palette.getContrastText(backgroundColorDefault), }, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { backgroundColor: theme.palette.primary.main, color: theme.palette.primary.contrastText, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText, diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js index 60ad3692646a34..8af6710aa95016 100644 --- a/packages/material-ui/src/Avatar/Avatar.js +++ b/packages/material-ui/src/Avatar/Avatar.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { position: 'relative', display: 'flex', @@ -18,11 +19,14 @@ export const styles = theme => ({ overflow: 'hidden', userSelect: 'none', }, + /* Styles applied to the root element if there are children and not `src` or `srcSet` */ + /* Styles applied to the root element if `color="default"`. */ colorDefault: { color: theme.palette.background.default, backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], }, + /* Styles applied to the img element if either `src` or `srcSet` is defined. */ img: { width: '100%', height: '100%', @@ -122,7 +126,7 @@ Avatar.propTypes = { */ component: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]), /** - * Attributes applied to the `img` element when the component + * Attributes applied to the `img` element if the component * is used to display an image. */ imgProps: PropTypes.object, diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js index c5823f49ae5b83..983c800f1594c2 100644 --- a/packages/material-ui/src/Backdrop/Backdrop.js +++ b/packages/material-ui/src/Backdrop/Backdrop.js @@ -5,6 +5,7 @@ import withStyles from '../styles/withStyles'; import Fade from '../Fade'; export const styles = { + /* Styles applied to the root element. */ root: { zIndex: -1, width: '100%', @@ -16,6 +17,7 @@ export const styles = { WebkitTapHighlightColor: 'transparent', backgroundColor: 'rgba(0, 0, 0, 0.5)', }, + /* Styles applied to the root element if `invisible={true}`. */ invisible: { backgroundColor: 'transparent', }, diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js index 262f79491128ae..f49888e04de6b2 100644 --- a/packages/material-ui/src/Badge/Badge.js +++ b/packages/material-ui/src/Badge/Badge.js @@ -7,12 +7,14 @@ import { capitalize } from '../utils/helpers'; const RADIUS = 12; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { position: 'relative', display: 'inline-flex', // For correct alignment with the text. verticalAlign: 'middle', }, + /* Styles applied to the badge `span` element. */ badge: { display: 'flex', flexDirection: 'row', @@ -33,14 +35,17 @@ export const styles = theme => ({ color: theme.palette.textColor, zIndex: 1, // Render the badge on top of potential ripples. }, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { backgroundColor: theme.palette.primary.main, color: theme.palette.primary.contrastText, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary.contrastText, }, + /* Styles applied to the root element if `color="error"`. */ colorError: { backgroundColor: theme.palette.error.main, color: theme.palette.error.contrastText, diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.js index 51c625eb79a315..c2c7b5e6c12b4f 100755 --- a/packages/material-ui/src/BottomNavigation/BottomNavigation.js +++ b/packages/material-ui/src/BottomNavigation/BottomNavigation.js @@ -5,6 +5,7 @@ import warning from 'warning'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'flex', justifyContent: 'center', diff --git a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js index 218c2b814d59d2..374fce640404f3 100644 --- a/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js +++ b/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js @@ -8,6 +8,7 @@ import ButtonBase from '../ButtonBase'; import unsupportedProp from '../utils/unsupportedProp'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { transition: theme.transitions.create(['color', 'padding-top'], { duration: theme.transitions.duration.short, @@ -28,8 +29,11 @@ export const styles = theme => ({ color: theme.palette.primary.main, }, }, + /* Styles applied to the root element if selected. */ selected: {}, + /* Styles applied to the root element if `showLabel={false}` and not selected. */ iconOnly: {}, + /* Styles applied to the span element that wraps the icon and label. */ wrapper: { display: 'inline-flex', alignItems: 'center', @@ -37,6 +41,7 @@ export const styles = theme => ({ width: '100%', flexDirection: 'column', }, + /* Styles applied to the label's span element. */ label: { fontFamily: theme.typography.fontFamily, fontSize: theme.typography.pxToRem(12), diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index 5a5341736807a7..965603ba079ebc 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -9,6 +9,7 @@ import ButtonBase from '../ButtonBase'; import { capitalize } from '../utils/helpers'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { ...theme.typography.button, lineHeight: '1.4em', // Improve readability for multiline button. @@ -36,12 +37,15 @@ export const styles = theme => ({ color: theme.palette.action.disabled, }, }, + /* Styles applied to the span element that wraps the children. */ label: { display: 'inherit', alignItems: 'inherit', justifyContent: 'inherit', }, + /* Styles applied to the root element if `variant="text"`. */ text: {}, + /* Styles applied to the root element if `variant="text"` and `color="primary"`. */ textPrimary: { color: theme.palette.primary.main, '&:hover': { @@ -52,6 +56,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */ textSecondary: { color: theme.palette.secondary.main, '&:hover': { @@ -62,14 +67,19 @@ export const styles = theme => ({ }, }, }, - flat: {}, // legacy - flatPrimary: {}, // legacy - flatSecondary: {}, // legacy + /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ + flat: {}, + /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ + flatPrimary: {}, + /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ + flatSecondary: {}, + /* Styles applied to the root element if `variant="outlined"`. */ outlined: { border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, }, + /* Styles applied to the root element if `variant="contained"`. */ contained: { color: theme.palette.getContrastText(theme.palette.grey[300]), backgroundColor: theme.palette.grey[300], @@ -96,6 +106,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */ containedPrimary: { color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.main, @@ -107,6 +118,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ containedSecondary: { color: theme.palette.secondary.contrastText, backgroundColor: theme.palette.secondary.main, @@ -118,9 +130,13 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ raised: {}, // legacy + /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ raisedPrimary: {}, // legacy + /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ raisedSecondary: {}, // legacy + /* Styles applied to the root element if `variant="fab"`. */ fab: { borderRadius: '50%', padding: 0, @@ -132,6 +148,7 @@ export const styles = theme => ({ boxShadow: theme.shadows[12], }, }, + /* Styles applied to the root element if `variant="extendedFab"`. */ extendedFab: { borderRadius: 48 / 2, padding: '0 16px', @@ -139,27 +156,34 @@ export const styles = theme => ({ minWidth: 48, height: 48, }, + /* Styles applied to the ButtonBase root element if the button is keyboard focused. */ focusVisible: {}, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the root element if `color="inherit"`. */ colorInherit: { color: 'inherit', }, + /* Styles applied to the root element if `size="mini"`. */ mini: { width: 40, height: 40, }, + /* Styles applied to the root element if `size="small"`. */ sizeSmall: { padding: '7px 8px', minWidth: 64, minHeight: 32, fontSize: theme.typography.pxToRem(13), }, + /* Styles applied to the root element if `size="large"`. */ sizeLarge: { padding: '8px 24px', minWidth: 112, minHeight: 40, fontSize: theme.typography.pxToRem(15), }, + /* Styles applied to the root element if `fullWidth={true}`. */ fullWidth: { width: '100%', }, diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js index dc96c98f997baa..fa05985607939e 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.js @@ -10,6 +10,7 @@ import TouchRipple from './TouchRipple'; import createRippleHandler from './createRippleHandler'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'inline-flex', alignItems: 'center', @@ -40,7 +41,9 @@ export const styles = { cursor: 'default', }, }, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the root element if keyboard focused. */ focusVisible: {}, }; @@ -371,7 +374,7 @@ ButtonBase.propTypes = { focusRipple: PropTypes.bool, /** * This property can help a person know which element has the keyboard focus. - * The class name will be applied when the element gain the focus throught a keyboard interaction. + * The class name will be applied when the element gain the focus through a keyboard interaction. * It's a polyfill for the [CSS :focus-visible feature](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). * The rational for using this feature [is explain here](https://github.com/WICG/focus-visible/blob/master/explainer.md). */ diff --git a/packages/material-ui/src/ButtonBase/TouchRipple.js b/packages/material-ui/src/ButtonBase/TouchRipple.js index efe6303e7a7502..637bb774a8e999 100644 --- a/packages/material-ui/src/ButtonBase/TouchRipple.js +++ b/packages/material-ui/src/ButtonBase/TouchRipple.js @@ -10,6 +10,7 @@ const DURATION = 550; export const DELAY_RIPPLE = 80; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'block', position: 'absolute', @@ -22,6 +23,7 @@ export const styles = theme => ({ pointerEvents: 'none', zIndex: 0, }, + /* Styles applied to the internal `Ripple` components `ripple` class. */ ripple: { width: 50, height: 50, @@ -30,14 +32,17 @@ export const styles = theme => ({ opacity: 0, position: 'absolute', }, + /* Styles applied to the internal `Ripple` components `rippleVisible` class. */ rippleVisible: { opacity: 0.3, transform: 'scale(1)', animation: `mui-ripple-enter ${DURATION}ms ${theme.transitions.easing.easeInOut}`, }, + /* Styles applied to the internal `Ripple` components `ripplePulsate` class. */ ripplePulsate: { animationDuration: `${theme.transitions.duration.shorter}ms`, }, + /* Styles applied to the internal `Ripple` components `child` class. */ child: { opacity: 1, display: 'block', @@ -46,10 +51,12 @@ export const styles = theme => ({ borderRadius: '50%', backgroundColor: 'currentColor', }, + /* Styles applied to the internal `Ripple` components `childLeaving` class. */ childLeaving: { opacity: 0, animation: `mui-ripple-exit ${DURATION}ms ${theme.transitions.easing.easeInOut}`, }, + /* Styles applied to the internal `Ripple` components `childPulsate` class. */ childPulsate: { position: 'absolute', left: 0, @@ -219,7 +226,7 @@ class TouchRipple extends React.PureComponent { clearTimeout(this.startTimer); const { ripples } = this.state; - // The touch interaction occures to quickly. + // The touch interaction occurs too quickly. // We still want to show ripple effect. if (event.type === 'touchend' && this.startTimerCommit) { event.persist(); diff --git a/packages/material-ui/src/Card/Card.js b/packages/material-ui/src/Card/Card.js index 81ba92696c7d10..9f55d5db54caa0 100644 --- a/packages/material-ui/src/Card/Card.js +++ b/packages/material-ui/src/Card/Card.js @@ -7,6 +7,7 @@ import Paper from '../Paper'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { overflow: 'hidden', }, diff --git a/packages/material-ui/src/CardActions/CardActions.js b/packages/material-ui/src/CardActions/CardActions.js index 25a86d3b546dee..20da4b47cc6431 100644 --- a/packages/material-ui/src/CardActions/CardActions.js +++ b/packages/material-ui/src/CardActions/CardActions.js @@ -6,6 +6,7 @@ import { cloneChildrenWithClassName } from '../utils/reactHelpers'; import '../Button'; // So we don't have any override priority issue. export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'flex', alignItems: 'center', @@ -15,6 +16,7 @@ export const styles = theme => ({ padding: '8px 12px', }, }, + /* Styles applied to the children. */ action: { margin: '0 4px', }, diff --git a/packages/material-ui/src/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js index aaa0cef89d1839..1786a5e4ce761f 100644 --- a/packages/material-ui/src/CardContent/CardContent.js +++ b/packages/material-ui/src/CardContent/CardContent.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: theme.mixins.gutters({ paddingTop: 16, paddingBottom: 16, diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js index d7b5be86d4dca4..5209a220f4be1f 100644 --- a/packages/material-ui/src/CardHeader/CardHeader.js +++ b/packages/material-ui/src/CardHeader/CardHeader.js @@ -5,26 +5,32 @@ import withStyles from '../styles/withStyles'; import Typography from '../Typography'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: theme.mixins.gutters({ display: 'flex', alignItems: 'center', paddingTop: 16, paddingBottom: 16, }), + /* Styles applied to the avatar element. */ avatar: { flex: '0 0 auto', marginRight: 16, }, + /* Styles applied to the action element. */ action: { flex: '0 0 auto', alignSelf: 'flex-start', marginTop: -8, marginRight: -16, }, + /* Styles applied to the content wrapper element. */ content: { flex: '1 1 auto', }, + /* Styles applied to the title Typography element. */ title: {}, + /* Styles applied to the subheader Typography element. */ subheader: {}, }); diff --git a/packages/material-ui/src/CardMedia/CardMedia.js b/packages/material-ui/src/CardMedia/CardMedia.js index ccb3a010824302..4159f1832d544c 100644 --- a/packages/material-ui/src/CardMedia/CardMedia.js +++ b/packages/material-ui/src/CardMedia/CardMedia.js @@ -5,12 +5,14 @@ import warning from 'warning'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'block', backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center', }, + /* Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. */ media: { width: '100%', }, diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index abb53cc99c0594..fd912bf7a752f5 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -9,11 +9,15 @@ import { capitalize } from '../utils/helpers'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { color: theme.palette.text.secondary, }, + /* Styles applied to the root element if `checked={true}`. */ checked: {}, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { '&$checked': { color: theme.palette.primary.main, @@ -22,6 +26,7 @@ export const styles = theme => ({ color: theme.palette.action.disabled, }, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { '&$checked': { color: theme.palette.secondary.main, diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index a213b6db211f10..bcfd8189df53d8 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -15,6 +15,7 @@ export const styles = theme => { const deleteIconColor = fade(theme.palette.text.primary, 0.26); return { + /* Styles applied to the root element. */ root: { fontFamily: theme.typography.fontFamily, fontSize: theme.typography.pxToRem(13), @@ -35,6 +36,7 @@ export const styles = theme => { border: 'none', // Remove `button` border padding: 0, // Remove `button` padding }, + /* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */ clickable: { // Remove grey highlight WebkitTapHighlightColor: 'transparent', @@ -47,11 +49,13 @@ export const styles = theme => { backgroundColor: emphasize(backgroundColor, 0.12), }, }, + /* Styles applied to the root element if `onDelete` is defined. */ deletable: { '&:focus': { backgroundColor: emphasize(backgroundColor, 0.08), }, }, + /* Styles applied to the `avatar` element if `checked={true}`. */ avatar: { marginRight: -4, width: height, @@ -59,10 +63,12 @@ export const styles = theme => { color: theme.palette.type === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], fontSize: theme.typography.pxToRem(16), }, + /* Styles applied to the `avartar` elements children. */ avatarChildren: { width: 19, height: 19, }, + /* Styles applied to the label `span` element`. */ label: { display: 'flex', alignItems: 'center', @@ -72,6 +78,7 @@ export const styles = theme => { whiteSpace: 'nowrap', cursor: 'inherit', }, + /* Styles applied to the `deleteIcon` element. */ deleteIcon: { // Remove grey highlight WebkitTapHighlightColor: 'transparent', diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js index 69c86351f1e47a..bf32f77980c21b 100644 --- a/packages/material-ui/src/CircularProgress/CircularProgress.js +++ b/packages/material-ui/src/CircularProgress/CircularProgress.js @@ -23,31 +23,40 @@ function easeIn(t) { } export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'inline-block', lineHeight: 1, // Keep the progress centered }, + /* Styles applied to the root element if `variant="static"`. */ static: { transition: theme.transitions.create('transform'), }, + /* Styles applied to the root element if `variant="indeterminate"`. */ indeterminate: { animation: 'mui-progress-circular-rotate 1.4s linear infinite', }, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { color: theme.palette.primary.main, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { color: theme.palette.secondary.main, }, + /* Styles applied to the `svg` element. */ svg: {}, + /* Styles applied to the `circle` svg path. */ circle: { stroke: 'currentColor', // Use butt to follow the specification, by chance, it's already the default CSS value. // strokeLinecap: 'butt', }, + /* Styles applied to the `circle` svg path if `variant="static"`. */ circleStatic: { transition: theme.transitions.create('stroke-dashoffset'), }, + /* Styles applied to the `circle` svg path if `variant="indeterminate"`. */ circleIndeterminate: { animation: 'mui-progress-circular-dash 1.4s ease-in-out infinite', // Some default value that looks fine waiting for the animation to kicks in. diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js index 3c0244b21139fa..f8c182e467a46e 100644 --- a/packages/material-ui/src/Collapse/Collapse.js +++ b/packages/material-ui/src/Collapse/Collapse.js @@ -9,18 +9,22 @@ import { duration } from '../styles/transitions'; import { getTransitionProps } from '../transitions/utils'; export const styles = theme => ({ + /* Styles applied to the container element. */ container: { height: 0, overflow: 'hidden', transition: theme.transitions.create('height'), }, + /* Styles applied to the container element when the transition has entered. */ entered: { height: 'auto', }, + /* Styles applied to the outer wrapper element. */ wrapper: { // Hack to get children with a negative margin to not falsify the height computation. display: 'flex', }, + /* Styles applied to the outer wrapper element. */ wrapperInner: { width: '100%', }, diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js index ae106954221737..f5169c3c945488 100644 --- a/packages/material-ui/src/Dialog/Dialog.js +++ b/packages/material-ui/src/Dialog/Dialog.js @@ -11,16 +11,20 @@ import { duration } from '../styles/transitions'; import Paper from '../Paper'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: {}, + /* Styles applied to the root element if `scroll="paper"`. */ scrollPaper: { display: 'flex', justifyContent: 'center', alignItems: 'center', }, + /* Styles applied to the root element if `scroll="bodyr"`. */ scrollBody: { overflowY: 'auto', overflowX: 'hidden', }, + /* Styles applied to the `Paper` component. */ paper: { display: 'flex', flexDirection: 'column', @@ -30,13 +34,16 @@ export const styles = theme => ({ // We disable the focus ring for mouse, touch and keyboard users. outline: 'none', }, + /* Styles applied to the `Paper` component if `scroll="paper"`. */ paperScrollPaper: { flex: '0 1 auto', maxHeight: 'calc(100% - 96px)', }, + /* Styles applied to the `Paper` component if `scroll="body"`. */ paperScrollBody: { margin: '48px auto', }, + /* Styles applied to the `Paper` component if `maxWidth="xs"`. */ paperWidthXs: { maxWidth: Math.max(theme.breakpoints.values.xs, 360), '&$paperScrollBody': { @@ -45,6 +52,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the `Paper` component if `maxWidth="sm"`. */ paperWidthSm: { maxWidth: theme.breakpoints.values.sm, '&$paperScrollBody': { @@ -53,6 +61,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the `Paper` component if `maxWidth="md"`. */ paperWidthMd: { maxWidth: theme.breakpoints.values.md, '&$paperScrollBody': { @@ -61,9 +70,11 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the `Paper` component if `fullWidth={true}`. */ paperFullWidth: { width: '100%', }, + /* Styles applied to the `Paper` component if `fullScreen={true}`. */ paperFullScreen: { margin: 0, width: '100%', diff --git a/packages/material-ui/src/DialogActions/DialogActions.js b/packages/material-ui/src/DialogActions/DialogActions.js index b2d2416420be50..eb013bf47b9f8d 100644 --- a/packages/material-ui/src/DialogActions/DialogActions.js +++ b/packages/material-ui/src/DialogActions/DialogActions.js @@ -6,6 +6,7 @@ import { cloneChildrenWithClassName } from '../utils/reactHelpers'; import '../Button'; // So we don't have any override priority issue. export const styles = { + /* Styles applied to the root element. */ root: { display: 'flex', alignItems: 'center', @@ -13,6 +14,7 @@ export const styles = { flex: '0 0 auto', margin: '8px 4px', }, + /* Styles applied to the children. */ action: { margin: '0 4px', }, diff --git a/packages/material-ui/src/DialogContent/DialogContent.js b/packages/material-ui/src/DialogContent/DialogContent.js index fc4cdd15f770f6..5dcfe2488baa70 100644 --- a/packages/material-ui/src/DialogContent/DialogContent.js +++ b/packages/material-ui/src/DialogContent/DialogContent.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { flex: '1 1 auto', overflowY: 'auto', diff --git a/packages/material-ui/src/DialogContentText/DialogContentText.js b/packages/material-ui/src/DialogContentText/DialogContentText.js index afd8380532a5ef..583598e7a46b38 100644 --- a/packages/material-ui/src/DialogContentText/DialogContentText.js +++ b/packages/material-ui/src/DialogContentText/DialogContentText.js @@ -7,6 +7,7 @@ import withStyles from '../styles/withStyles'; import Typography from '../Typography'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { color: theme.palette.text.secondary, }, diff --git a/packages/material-ui/src/DialogTitle/DialogTitle.js b/packages/material-ui/src/DialogTitle/DialogTitle.js index 460cd7dd565d5a..98e5bc3e5e7a4a 100644 --- a/packages/material-ui/src/DialogTitle/DialogTitle.js +++ b/packages/material-ui/src/DialogTitle/DialogTitle.js @@ -5,6 +5,7 @@ import withStyles from '../styles/withStyles'; import Typography from '../Typography'; export const styles = { + /* Styles applied to the root element. */ root: { margin: 0, padding: '24px 24px 20px', diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js index 1ca7d86d5c8724..d03f0cc7ec9819 100644 --- a/packages/material-ui/src/Divider/Divider.js +++ b/packages/material-ui/src/Divider/Divider.js @@ -5,6 +5,7 @@ import withStyles from '../styles/withStyles'; import { fade } from '../styles/colorManipulator'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { height: 1, margin: 0, // Reset browser default style. @@ -12,15 +13,18 @@ export const styles = theme => ({ flexShrink: 0, backgroundColor: theme.palette.divider, }, + /* Styles applied to the root element if `absolute={true}`. */ absolute: { position: 'absolute', bottom: 0, left: 0, width: '100%', }, + /* Styles applied to the root element if `inset={true}`. */ inset: { marginLeft: 72, }, + /* Styles applied to the root element if `light={true}`. */ light: { backgroundColor: fade(theme.palette.divider, 0.08), }, diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js index 85b7390a559312..51ca83e4924b4d 100644 --- a/packages/material-ui/src/Drawer/Drawer.js +++ b/packages/material-ui/src/Drawer/Drawer.js @@ -26,9 +26,11 @@ export function getAnchor(props) { } export const styles = theme => ({ + /* Styles applied to the root element if `variant="permanent or persistent"`. */ docked: { flex: '0 0 auto', }, + /* Styles applied to the `Paper` component. */ paper: { overflowY: 'auto', display: 'flex', @@ -45,14 +47,17 @@ export const styles = theme => ({ // :focus-ring CSS pseudo-class will help. outline: 'none', }, + /* Styles applied to the `Paper` component if `anchor="left"`. */ paperAnchorLeft: { left: 0, right: 'auto', }, + /* Styles applied to the `Paper` component if `anchor="right"`. */ paperAnchorRight: { left: 'auto', right: 0, }, + /* Styles applied to the `Paper` component if `anchor="top"`. */ paperAnchorTop: { top: 0, left: 0, @@ -61,6 +66,7 @@ export const styles = theme => ({ height: 'auto', maxHeight: '100vh', }, + /* Styles applied to the `Paper` component if `anchor="bottom"`. */ paperAnchorBottom: { top: 'auto', left: 0, @@ -69,19 +75,24 @@ export const styles = theme => ({ height: 'auto', maxHeight: '100vh', }, + /* Styles applied to the `Paper` component if `anchor="left"` & `variant` is not "temporary". */ paperAnchorDockedLeft: { borderRight: `1px solid ${theme.palette.divider}`, }, + /* Styles applied to the `Paper` component if `anchor="top"` & `variant` is not "temporary". */ paperAnchorDockedTop: { borderBottom: `1px solid ${theme.palette.divider}`, }, + /* Styles applied to the `Paper` component if `anchor="right"` & `variant` is not "temporary". */ paperAnchorDockedRight: { borderLeft: `1px solid ${theme.palette.divider}`, }, + /* Styles applied to the `Paper` component if `anchor="bottom"` & `variant` is not "temporary". */ paperAnchorDockedBottom: { borderTop: `1px solid ${theme.palette.divider}`, }, - modal: {}, // Just here so people can override the style. + /* Styles applied to the `Modal` component. */ + modal: {}, }); /** diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js index 9ec7824e1b0e51..72190ba2500f63 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js @@ -27,6 +27,7 @@ export const styles = theme => { }; return { + /* Styles applied to the root element. */ root: { position: 'relative', transition: theme.transitions.create(['margin'], transition), @@ -59,6 +60,7 @@ export const styles = theme => { }, }, }, + /* Styles applied to the root element if `expanded={true}`. */ expanded: { margin: '16px 0', '&:first-child': { @@ -71,6 +73,7 @@ export const styles = theme => { opacity: 0, }, }, + /* Styles applied to the root element if `disabled={true}`. */ disabled: { backgroundColor: theme.palette.action.disabledBackground, }, diff --git a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js index d8bc10fc9d60fa..66d004ec1740ee 100644 --- a/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js +++ b/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js @@ -6,12 +6,14 @@ import { cloneChildrenWithClassName } from '../utils/reactHelpers'; import '../Button'; // So we don't have any override priority issue. export const styles = { + /* Styles applied to the root element. */ root: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '16px 8px', }, + /* Styles applied to the children. */ action: { marginLeft: 8, }, diff --git a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js index c1179eeeb37a1f..d5789f9fb885ee 100644 --- a/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js +++ b/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'flex', padding: '8px 24px 24px', diff --git a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js index 5f84db9f2de13f..3a89bcb406b6ba 100644 --- a/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js +++ b/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js @@ -12,6 +12,7 @@ export const styles = theme => { duration: theme.transitions.duration.shortest, }; return { + /* Styles applied to the root element. */ root: { display: 'flex', minHeight: 8 * 6, @@ -30,9 +31,13 @@ export const styles = theme => { opacity: 0.38, }, }, + /* Styles applied to the root element if `expanded={true}`. */ expanded: {}, + /* Styles applied to the root and children wrapper elements when focused. */ focused: {}, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the children wrapper element. */ content: { display: 'flex', flexGrow: 1, @@ -45,6 +50,7 @@ export const styles = theme => { margin: '20px 0', }, }, + /* Styles applied to the `IconButton` component when `expandIcon` is supplied. */ expandIcon: { position: 'absolute', top: '50%', diff --git a/packages/material-ui/src/FormControl/FormControl.js b/packages/material-ui/src/FormControl/FormControl.js index 129d7ed5c6b9f5..82fdc84e56e3c5 100644 --- a/packages/material-ui/src/FormControl/FormControl.js +++ b/packages/material-ui/src/FormControl/FormControl.js @@ -7,6 +7,7 @@ import { capitalize } from '../utils/helpers'; import { isMuiElement } from '../utils/reactHelpers'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'inline-flex', flexDirection: 'column', @@ -17,14 +18,17 @@ export const styles = { margin: 0, border: 0, }, + /* Styles applied to the root element if `margin="normal"`. */ marginNormal: { marginTop: 16, marginBottom: 8, }, + /* Styles applied to the root element if `margin="dense"`. */ marginDense: { marginTop: 8, marginBottom: 4, }, + /* Styles applied to the root element if `fullWidth={true}`. */ fullWidth: { width: '100%', }, diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js index c17b1a0f20de59..fb7f8204d1e5d7 100644 --- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js +++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js @@ -7,6 +7,7 @@ import withStyles from '../styles/withStyles'; import Typography from '../Typography'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'inline-flex', alignItems: 'center', @@ -21,7 +22,9 @@ export const styles = theme => ({ cursor: 'default', }, }, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the label's Typography component. */ label: { '&$disabled': { color: theme.palette.text.disabled, diff --git a/packages/material-ui/src/FormGroup/FormGroup.js b/packages/material-ui/src/FormGroup/FormGroup.js index a926effea1ee6c..717c590e75a691 100644 --- a/packages/material-ui/src/FormGroup/FormGroup.js +++ b/packages/material-ui/src/FormGroup/FormGroup.js @@ -4,11 +4,13 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'flex', flexDirection: 'column', flexWrap: 'wrap', }, + /* Styles applied to the root element if `row={true}`. */ row: { flexDirection: 'row', }, diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js index 8e205d9f02cb37..965efd55f09bd2 100644 --- a/packages/material-ui/src/FormHelperText/FormHelperText.js +++ b/packages/material-ui/src/FormHelperText/FormHelperText.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { color: theme.palette.text.secondary, fontFamily: theme.typography.fontFamily, @@ -20,8 +21,11 @@ export const styles = theme => ({ color: theme.palette.text.disabled, }, }, + /* Styles applied to the root element if `error={true}`. */ error: {}, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the root element if `margin="dense"`. */ marginDense: { marginTop: 4, }, diff --git a/packages/material-ui/src/FormLabel/FormLabel.js b/packages/material-ui/src/FormLabel/FormLabel.js index accec3fc75b222..bf665a5a93413b 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.js +++ b/packages/material-ui/src/FormLabel/FormLabel.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { fontFamily: theme.typography.fontFamily, color: theme.palette.text.secondary, @@ -20,8 +21,11 @@ export const styles = theme => ({ color: theme.palette.error.main, }, }, + /* Styles applied to the root element if `focused={true}`. */ focused: {}, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the root element if `error={true}`. */ error: {}, asterisk: { '&$error': { diff --git a/packages/material-ui/src/Grid/Grid.js b/packages/material-ui/src/Grid/Grid.js index 0d3c0c6a113fc5..7b7b55962b6dbc 100644 --- a/packages/material-ui/src/Grid/Grid.js +++ b/packages/material-ui/src/Grid/Grid.js @@ -92,70 +92,91 @@ function generateGutter(theme, breakpoint) { // flexWrap: 'nowrap', // justifyContent: 'flex-start', export const styles = theme => ({ + /* Styles applied to the root element if `container={true}`. */ container: { boxSizing: 'border-box', display: 'flex', flexWrap: 'wrap', width: '100%', }, + /* Styles applied to the root element if `item={true}`. */ item: { boxSizing: 'border-box', margin: '0', // For instance, it's useful when used with a `figure` element. }, + /* Styles applied to the root element if `zeroMinWidth={true}`. */ zeroMinWidth: { minWidth: 0, }, + /* Styles applied to the root element if `direction="column"`. */ 'direction-xs-column': { flexDirection: 'column', }, + /* Styles applied to the root element if `direction="column-reverse"`. */ 'direction-xs-column-reverse': { flexDirection: 'column-reverse', }, + /* Styles applied to the root element if `direction="rwo-reverse"`. */ 'direction-xs-row-reverse': { flexDirection: 'row-reverse', }, + /* Styles applied to the root element if `wrap="nowrap"`. */ 'wrap-xs-nowrap': { flexWrap: 'nowrap', }, + /* Styles applied to the root element if `wrap="reverse"`. */ 'wrap-xs-wrap-reverse': { flexWrap: 'wrap-reverse', }, + /* Styles applied to the root element if `alignItems="center"`. */ 'align-items-xs-center': { alignItems: 'center', }, + /* Styles applied to the root element if `alignItems="flex-start"`. */ 'align-items-xs-flex-start': { alignItems: 'flex-start', }, + /* Styles applied to the root element if `alignItems="flex-end"`. */ 'align-items-xs-flex-end': { alignItems: 'flex-end', }, + /* Styles applied to the root element if `alignItems="baseline"`. */ 'align-items-xs-baseline': { alignItems: 'baseline', }, + /* Styles applied to the root element if `alignContent="center"`. */ 'align-content-xs-center': { alignContent: 'center', }, + /* Styles applied to the root element if `alignContent="flex-start"`. */ 'align-content-xs-flex-start': { alignContent: 'flex-start', }, + /* Styles applied to the root element if `alignContent="flex-end"`. */ 'align-content-xs-flex-end': { alignContent: 'flex-end', }, + /* Styles applied to the root element if `alignContent="space-between"`. */ 'align-content-xs-space-between': { alignContent: 'space-between', }, + /* Styles applied to the root element if `alignContent="space-around"`. */ 'align-content-xs-space-around': { alignContent: 'space-around', }, + /* Styles applied to the root element if `justifyContent="center"`. */ 'justify-xs-center': { justifyContent: 'center', }, + /* Styles applied to the root element if `justifyContent="flex-end"`. */ 'justify-xs-flex-end': { justifyContent: 'flex-end', }, + /* Styles applied to the root element if `justifyContent="space-between"`. */ 'justify-xs-space-between': { justifyContent: 'space-between', }, + /* Styles applied to the root element if `justifyContent="space-around"`. */ 'justify-xs-space-around': { justifyContent: 'space-around', }, diff --git a/packages/material-ui/src/GridList/GridList.js b/packages/material-ui/src/GridList/GridList.js index 7618532e87dc7b..f00ee08a4d9a70 100644 --- a/packages/material-ui/src/GridList/GridList.js +++ b/packages/material-ui/src/GridList/GridList.js @@ -5,6 +5,7 @@ import warning from 'warning'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'flex', flexWrap: 'wrap', diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js index b6f8f22a30110f..dfc37a2533fdd2 100644 --- a/packages/material-ui/src/GridListTile/GridListTile.js +++ b/packages/material-ui/src/GridListTile/GridListTile.js @@ -6,22 +6,26 @@ import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { boxSizing: 'border-box', flexShrink: 0, }, + /* Styles applied to the `div` element that wraps the children. */ tile: { position: 'relative', - display: 'block', // In case it's not renderd with a div. + display: 'block', // In case it's not rendered with a div. height: '100%', overflow: 'hidden', }, + /* Styles applied to an `ing` element child, if if needed to ensure it covers the tile. */ imgFullHeight: { height: '100%', transform: 'translateX(-50%)', position: 'relative', left: '50%', }, + /* Styles applied to an `ing` element child, if if needed to ensure it covers the tile. */ imgFullWidth: { width: '100%', position: 'relative', diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.js index bb515e999ae69a..eed190b64ac7bc 100644 --- a/packages/material-ui/src/GridListTileBar/GridListTileBar.js +++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { position: 'absolute', left: 0, @@ -14,15 +15,19 @@ export const styles = theme => ({ alignItems: 'center', fontFamily: theme.typography.fontFamily, }, + /* Styles applied to the root element if `titlePosition="bottom"`. */ titlePositionBottom: { bottom: 0, }, + /* Styles applied to the root element if `titlePosition="top"`. */ titlePositionTop: { top: 0, }, + /* Styles applied to the root element if a `subtitle` is provided. */ rootSubtitle: { height: 68, }, + /* Styles applied to the title and subtitle container element. */ titleWrap: { flexGrow: 1, marginLeft: theme.mixins.gutters().paddingLeft, @@ -30,12 +35,15 @@ export const styles = theme => ({ color: theme.palette.common.white, overflow: 'hidden', }, + /* Styles applied to the container element if `actionPosition="left"`. */ titleWrapActionPosLeft: { marginLeft: 0, }, + /* Styles applied to the container element if `actionPosition="right"`. */ titleWrapActionPosRight: { marginRight: 0, }, + /* Styles applied to the title container element. */ title: { fontSize: theme.typography.pxToRem(16), lineHeight: '24px', @@ -43,6 +51,7 @@ export const styles = theme => ({ overflow: 'hidden', whiteSpace: 'nowrap', }, + /* Styles applied to the subtitle container element. */ subtitle: { fontSize: theme.typography.pxToRem(12), lineHeight: 1, @@ -50,7 +59,9 @@ export const styles = theme => ({ overflow: 'hidden', whiteSpace: 'nowrap', }, + /* Styles applied to the actionIcon if supplied. */ actionIcon: {}, + /* Styles applied to the actionIcon if `actionPosition="left". */ actionIconActionPosLeft: { order: -1, }, diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js index 7c5f6324979414..4e847051025eee 100644 --- a/packages/material-ui/src/Icon/Icon.js +++ b/packages/material-ui/src/Icon/Icon.js @@ -5,6 +5,7 @@ import withStyles from '../styles/withStyles'; import { capitalize } from '../utils/helpers'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { userSelect: 'none', fontSize: 24, @@ -15,18 +16,23 @@ export const styles = theme => ({ overflow: 'hidden', flexShrink: 0, }, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { color: theme.palette.primary.main, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { color: theme.palette.secondary.main, }, + /* Styles applied to the root element if `color="action"`. */ colorAction: { color: theme.palette.action.active, }, + /* Styles applied to the root element if `color="error"`. */ colorError: { color: theme.palette.error.main, }, + /* Styles applied to the root element if `color="disabled"`. */ colorDisabled: { color: theme.palette.action.disabled, }, diff --git a/packages/material-ui/src/IconButton/IconButton.js b/packages/material-ui/src/IconButton/IconButton.js index 9ed61af3808f2b..763a3a17f7a8fd 100644 --- a/packages/material-ui/src/IconButton/IconButton.js +++ b/packages/material-ui/src/IconButton/IconButton.js @@ -9,6 +9,7 @@ import ButtonBase from '../ButtonBase'; import { capitalize } from '../utils/helpers'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { textAlign: 'center', flex: '0 0 auto', @@ -35,9 +36,11 @@ export const styles = theme => ({ color: theme.palette.action.disabled, }, }, + /* Styles applied to the root element if `color="inherit"`. */ colorInherit: { color: 'inherit', }, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { color: theme.palette.primary.main, '&:hover': { @@ -48,6 +51,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { color: theme.palette.secondary.main, '&:hover': { @@ -58,7 +62,9 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the children container element. */ label: { width: '100%', display: 'flex', diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index b3389ffcf309e6..eb5c7dbb9c9be5 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -57,6 +57,7 @@ export const styles = theme => { const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; return { + /* Styles applied to the root element. */ root: { // Mimics the default input display property used by browsers for an input. display: 'inline-flex', @@ -69,13 +70,17 @@ export const styles = theme => { color: theme.palette.text.disabled, }, }, + /* Styles applied to the root element if the component is a descendant of `FormControl`. */ formControl: { 'label + &': { marginTop: 16, }, }, + /* Styles applied to the root element if the component is focused. */ focused: {}, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the root element if `disabledUnderline={false}`. */ underline: { '&:after': { borderBottom: `2px solid ${theme.palette.primary[light ? 'dark' : 'light']}`, @@ -119,13 +124,17 @@ export const styles = theme => { borderBottom: `1px dotted ${bottomLineColor}`, }, }, + /* Styles applied to the root element if `error={true}`. */ error: {}, + /* Styles applied to the root element if `multiline={true}`. */ multiline: { padding: `${8 - 2}px 0 ${8 - 1}px`, }, + /* Styles applied to the root element if `fullWidth={true}`. */ fullWidth: { width: '100%', }, + /* Styles applied to the `input` element. */ input: { font: 'inherit', color: 'currentColor', @@ -171,17 +180,21 @@ export const styles = theme => { opacity: 1, // Reset iOS opacity }, }, + /* Styles applied to the `input` element if `margin="dense"`. */ inputMarginDense: { paddingTop: 4 - 1, }, + /* Styles applied to the `input` element if `multiline={true}`. */ inputMultiline: { resize: 'none', padding: 0, }, + /* Styles applied to the `input` element if `type` is not "text"`. */ inputType: { // type="date" or type="time", etc. have specific styles we need to reset. height: '1.1875em', // Reset (19px), match the native input line-height }, + /* Styles applied to the `input` element if `type="search"`. */ inputTypeSearch: { // Improve type search style. '-moz-appearance': 'textfield', diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js index a64797f148e784..de6a8a8ad82fc5 100644 --- a/packages/material-ui/src/Input/Textarea.js +++ b/packages/material-ui/src/Input/Textarea.js @@ -8,6 +8,7 @@ import withStyles from '../styles/withStyles'; const ROWS_HEIGHT = 19; export const styles = { + /* Styles applied to the root element. */ root: { position: 'relative', // because the shadow has position: 'absolute', width: '100%', diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.js b/packages/material-ui/src/InputAdornment/InputAdornment.js index 51c3875149d886..db3b668ef3996a 100644 --- a/packages/material-ui/src/InputAdornment/InputAdornment.js +++ b/packages/material-ui/src/InputAdornment/InputAdornment.js @@ -5,14 +5,17 @@ import Typography from '../Typography'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'flex', maxHeight: '2em', alignItems: 'center', }, + /* Styles applied to the root element if `position="start"`. */ positionStart: { marginRight: 8, }, + /* Styles applied to the root element if `position="end"`. */ positionEnd: { marginLeft: 8, }, diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js index bf9562b26da1d2..2a92be3c02a8b5 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.js +++ b/packages/material-ui/src/InputLabel/InputLabel.js @@ -7,9 +7,11 @@ import withStyles from '../styles/withStyles'; import FormLabel from '../FormLabel'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { transformOrigin: 'top left', }, + /* Styles applied to the root element if the component is a descendant of `FormControl`. */ formControl: { position: 'absolute', left: 0, @@ -17,14 +19,17 @@ export const styles = theme => ({ // slight alteration to spec spacing to match visual spec result transform: 'translate(0, 24px) scale(1)', }, + /* Styles applied to the root element if `margin="dense"`. */ marginDense: { // Compensation for the `Input.inputDense` style. transform: 'translate(0, 21px) scale(1)', }, + /* Styles applied to the `input` element if `shrink={true}`. */ shrink: { transform: 'translate(0, 1.5px) scale(0.75)', transformOrigin: 'top left', }, + /* Styles applied to the `input` element if `disableAnimation={false}`. */ animated: { transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter, diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.js b/packages/material-ui/src/LinearProgress/LinearProgress.js index bad3638b2cb381..36fd02d1594603 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.js +++ b/packages/material-ui/src/LinearProgress/LinearProgress.js @@ -8,23 +8,29 @@ import { lighten } from '../styles/colorManipulator'; const TRANSITION_DURATION = 4; // seconds export const styles = theme => ({ + /* Styles applied to the root element. */ root: { position: 'relative', overflow: 'hidden', height: 5, }, + /* Styles applied to the root & bar2 element if `color="primary"`; bar2 if `variant-"buffer"`. */ colorPrimary: { backgroundColor: lighten(theme.palette.primary.light, 0.6), }, + /* Styles applied to the root & bar2 elements if `color="secondary"`; bar2 if variant="buffer". */ colorSecondary: { backgroundColor: lighten(theme.palette.secondary.light, 0.4), }, + /* Styles applied to the root element if `variant="buffer"`. */ buffer: { backgroundColor: 'transparent', }, + /* Styles applied to the root element if `variant="query"`. */ query: { transform: 'rotate(180deg)', }, + /* Styles applied to the additional bar element if `variant="buffer"`. */ dashed: { position: 'absolute', marginTop: 0, @@ -32,6 +38,7 @@ export const styles = theme => ({ width: '100%', animation: 'buffer 3s infinite linear', }, + /* Styles applied to the additional bar element if `variant="buffer"` & `color="primary"`. */ dashedColorPrimary: { backgroundImage: `radial-gradient(${lighten(theme.palette.primary.light, 0.6)} 0%, ${lighten( theme.palette.primary.light, @@ -40,6 +47,7 @@ export const styles = theme => ({ backgroundSize: '10px 10px', backgroundPosition: '0px -23px', }, + /* Styles applied to the additional bar element if `variant="buffer"` & `color="secondary"`. */ dashedColorSecondary: { backgroundImage: `radial-gradient(${lighten(theme.palette.secondary.light, 0.4)} 0%, ${lighten( theme.palette.secondary.light, @@ -48,6 +56,7 @@ export const styles = theme => ({ backgroundSize: '10px 10px', backgroundPosition: '0px -23px', }, + /* Styles applied to the layered bar1 & bar2 elements. */ bar: { width: '100%', position: 'absolute', @@ -57,31 +66,40 @@ export const styles = theme => ({ transition: 'transform 0.2s linear', transformOrigin: 'left', }, + /* Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */ barColorPrimary: { backgroundColor: theme.palette.primary.main, }, + /* Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */ barColorSecondary: { backgroundColor: theme.palette.secondary.main, }, + /* Styles applied to the bar1 element if `variant="indeterminate or query"`. */ bar1Indeterminate: { width: 'auto', willChange: 'left, right', animation: 'mui-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite', }, - bar2Indeterminate: { - width: 'auto', - willChange: 'left, right', - animation: 'mui-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite', - animationDelay: '1.15s', - }, + /* Styles applied to the bar1 element if `variant="determinate"`. */ bar1Determinate: { willChange: 'transform', transition: `transform .${TRANSITION_DURATION}s linear`, }, + /* Styles applied to the bar1 element if `variant="buffer"`. */ bar1Buffer: { zIndex: 1, transition: `transform .${TRANSITION_DURATION}s linear`, }, + /* Styles applied to the bar2 element if `variant="indeterminate or query"`. */ + bar2Indeterminate: { + width: 'auto', + willChange: 'left, right', + animation: 'mui-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite', + animationDelay: '1.15s', + }, + /* Styles applied to the bar2 element if `variant="determinate"`. */ + bar2Determinate: {}, + /* Styles applied to the bar2 element if `variant="buffer"`. */ bar2Buffer: { transition: `transform .${TRANSITION_DURATION}s linear`, }, @@ -174,6 +192,7 @@ function LinearProgress(props) { [classes.barColorSecondary]: color === 'secondary' && variant !== 'buffer', [classes.colorSecondary]: color === 'secondary' && variant === 'buffer', [classes.bar2Indeterminate]: variant === 'indeterminate' || variant === 'query', + [classes.bar1Determinate]: variant === 'determinate', [classes.bar2Buffer]: variant === 'buffer', }); const rootProps = {}; diff --git a/packages/material-ui/src/List/List.js b/packages/material-ui/src/List/List.js index d5ed9b6e8d16d4..e246bc300e31f0 100644 --- a/packages/material-ui/src/List/List.js +++ b/packages/material-ui/src/List/List.js @@ -4,20 +4,24 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { listStyle: 'none', margin: 0, padding: 0, position: 'relative', }, + /* Styles applied to the root element if `disablePddding={false}`. */ padding: { paddingTop: 8, paddingBottom: 8, }, + /* Styles applied to the root element if `dense={true}` & `disablePddding={false}`. */ dense: { paddingTop: 4, paddingBottom: 4, }, + /* Styles applied to the root element if a `subheader` is provided. */ subheader: { paddingTop: 0, }, diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js index 8bcdba97908452..0b62c19ac1e5fb 100644 --- a/packages/material-ui/src/ListItem/ListItem.js +++ b/packages/material-ui/src/ListItem/ListItem.js @@ -6,6 +6,7 @@ import ButtonBase from '../ButtonBase'; import { isMuiElement } from '../utils/reactHelpers'; export const styles = theme => ({ + /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */ root: { display: 'flex', justifyContent: 'flex-start', @@ -15,29 +16,37 @@ export const styles = theme => ({ width: '100%', boxSizing: 'border-box', textAlign: 'left', + paddingTop: 12, + paddingBottom: 12, }, + /* Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. */ container: { position: 'relative', }, + // TODO: Sanity check this - why is focusVisibleClassName prop apparently applied to a div? + /* Styles applied to the `component`'s `focusVisibleClassName` property if `button={true}`. */ focusVisible: { backgroundColor: theme.palette.action.hover, }, - default: { - paddingTop: 12, - paddingBottom: 12, - }, + /* Legacy styles applied to the root element. Use `root` instead. */ + default: {}, + /* Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`. */ dense: { paddingTop: 8, paddingBottom: 8, }, + /* Styles applied to the inner `component` element if `dense={true}`. */ disabled: { opacity: 0.5, }, + /* Styles applied to the inner `component` element if `divider={true}`. */ divider: { borderBottom: `1px solid ${theme.palette.divider}`, backgroundClip: 'padding-box', }, + /* Styles applied to the inner `component` element if `disableGutters={false}`. */ gutters: theme.mixins.gutters(), + /* Styles applied to the inner `component` element if `button={true}`. */ button: { transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shortest, @@ -51,6 +60,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. */ secondaryAction: { // Add some space to avoid collision as `ListItemSecondaryAction` // is absolutely positionned. @@ -90,8 +100,9 @@ class ListItem extends React.Component { const className = classNames( classes.root, - isDense || hasAvatar ? classes.dense : classes.default, + classes.default, { + [classes.dense]: isDense || hasAvatar, [classes.gutters]: !disableGutters, [classes.divider]: divider, [classes.disabled]: disabled, diff --git a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js index aa0817906681e6..5f842d7f23c89f 100644 --- a/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js +++ b/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js @@ -5,12 +5,14 @@ import warning from 'warning'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { width: 36, height: 36, fontSize: theme.typography.pxToRem(18), marginRight: 4, }, + /* Styles applied to the children – typically the `Avatar` component. */ icon: { width: 20, height: 20, @@ -19,7 +21,7 @@ export const styles = theme => ({ }); /** - * It's a simple wrapper to apply the `dense` mode styles to `Avatar`. + * This is a simple wrapper to apply the `dense` mode styles to `Avatar`. */ function ListItemAvatar(props, context) { const { children, classes, className: classNameProp, ...other } = props; @@ -49,7 +51,7 @@ function ListItemAvatar(props, context) { ListItemAvatar.propTypes = { /** - * The content of the component, normally `Avatar`. + * The content of the component – normally `Avatar`. */ children: PropTypes.element.isRequired, /** diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.js index 043568b5769bc6..16c5b097175755 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { marginRight: 16, color: theme.palette.action.active, diff --git a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js index 75c49c672bf57d..f3fb82d3a5aa18 100644 --- a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js +++ b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { position: 'absolute', right: 4, diff --git a/packages/material-ui/src/ListItemText/ListItemText.js b/packages/material-ui/src/ListItemText/ListItemText.js index a445dc141c3306..df66577337d96a 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.js +++ b/packages/material-ui/src/ListItemText/ListItemText.js @@ -5,6 +5,7 @@ import withStyles from '../styles/withStyles'; import Typography from '../Typography'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { flex: '1 1 auto', minWidth: 0, @@ -13,24 +14,29 @@ export const styles = theme => ({ paddingLeft: 0, }, }, + /* Styles applied to the root element if `inset={true}`. */ inset: { '&:first-child': { paddingLeft: 56, }, }, + /* Styles applied to the root element if `context.dense` is `true`. */ dense: { fontSize: theme.typography.pxToRem(13), }, + /* Styles applied to the primary `Typography` component. */ primary: { '&$textDense': { fontSize: 'inherit', }, }, + /* Styles applied to the secondary `Typography` component. */ secondary: { '&$textDense': { fontSize: 'inherit', }, }, + /* Styles applied to the `Typography` components if `context.dense` is `true`. */ textDense: {}, }); diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.js b/packages/material-ui/src/ListSubheader/ListSubheader.js index 549f3ef50ab225..4ecc8fe8fea2d9 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.js +++ b/packages/material-ui/src/ListSubheader/ListSubheader.js @@ -5,6 +5,7 @@ import withStyles from '../styles/withStyles'; import { capitalize } from '../utils/helpers'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: theme.mixins.gutters({ boxSizing: 'border-box', lineHeight: '48px', @@ -14,15 +15,19 @@ export const styles = theme => ({ fontWeight: theme.typography.fontWeightMedium, fontSize: theme.typography.pxToRem(14), }), + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { color: theme.palette.primary.main, }, + /* Styles applied to the root element if `color="inherit"`. */ colorInherit: { color: 'inherit', }, + /* Styles applied to the root element if `inset={true}`. */ inset: { paddingLeft: 72, }, + /* Styles applied to the root element if `disableSticky={false}`. */ sticky: { position: 'sticky', top: 0, diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index caa3a1e05e4fbc..9dce90f7c9ff8a 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -19,9 +19,10 @@ const LTR_ORIGIN = { }; export const styles = { + /* Styles applied to the `Paper` component. */ paper: { // specZ: The maximum height of a simple menu should be one or more rows less than the view - // height. This ensures a tappable area outside of the simple menu with which to dismiss + // height. This ensures a tapable area outside of the simple menu with which to dismiss // the menu. maxHeight: 'calc(100% - 96px)', // Add iOS momentum scrolling. diff --git a/packages/material-ui/src/MenuItem/MenuItem.js b/packages/material-ui/src/MenuItem/MenuItem.js index 70b3e626969e5e..3aeb115f518d46 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.js +++ b/packages/material-ui/src/MenuItem/MenuItem.js @@ -7,6 +7,7 @@ import withStyles from '../styles/withStyles'; import ListItem from '../ListItem'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { ...theme.typography.subheading, height: 24, @@ -21,6 +22,7 @@ export const styles = theme => ({ backgroundColor: theme.palette.action.selected, }, }, + /* Styles applied to the root element if `selected={true}`. */ selected: {}, }); diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js index 45705fe2ebe4d1..cdb7cb0382ef8a 100644 --- a/packages/material-ui/src/MobileStepper/MobileStepper.js +++ b/packages/material-ui/src/MobileStepper/MobileStepper.js @@ -9,6 +9,7 @@ import { capitalize } from '../utils/helpers'; import LinearProgress from '../LinearProgress'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'flex', flexDirection: 'row', @@ -17,6 +18,7 @@ export const styles = theme => ({ background: theme.palette.background.default, padding: 8, }, + /* Styles applied to the root element if `position="bottom"`. */ positionBottom: { position: 'fixed', bottom: 0, @@ -24,6 +26,7 @@ export const styles = theme => ({ right: 0, zIndex: theme.zIndex.mobileStepper, }, + /* Styles applied to the root element if `position="top"`. */ positionTop: { position: 'fixed', top: 0, @@ -31,11 +34,14 @@ export const styles = theme => ({ right: 0, zIndex: theme.zIndex.mobileStepper, }, + /* Styles applied to the root element if `position="static"`. */ positionStatic: {}, + /* Styles applied to the dots container if `variant="dots"`. */ dots: { display: 'flex', flexDirection: 'row', }, + /* Styles applied to each dot if `variant="dots"`. */ dot: { backgroundColor: theme.palette.action.disabled, borderRadius: '50%', @@ -43,9 +49,11 @@ export const styles = theme => ({ height: 8, margin: '0 2px', }, + /* Styles applied to a dot if `variant="dots"` and this is the active step. */ dotActive: { backgroundColor: theme.palette.primary.main, }, + /* Styles applied to the Linear Progress component if `variant="progress"`. */ progress: { width: '50%', }, diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js index 0a4e0d3bafe9ec..ad6b1d98290dac 100644 --- a/packages/material-ui/src/Modal/Modal.js +++ b/packages/material-ui/src/Modal/Modal.js @@ -22,6 +22,7 @@ function getHasTransition(props) { } export const styles = theme => ({ + /* Styles applied to the root element. */ root: { position: 'fixed', zIndex: theme.zIndex.modal, @@ -30,6 +31,7 @@ export const styles = theme => ({ top: 0, left: 0, }, + /* Styles applied to the root element if the `Modal` has exited. */ hidden: { visibility: 'hidden', }, diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index e116f9a182603b..5e006741fead27 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -8,10 +8,12 @@ import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown'; import Input from '../Input'; export const styles = theme => ({ + /* Styles applied to the `Input` component `root` class. */ root: { position: 'relative', width: '100%', }, + /* Styles applied to the `Input` component `select` class. */ select: { '-moz-appearance': 'none', // Reset '-webkit-appearance': 'none', // Reset @@ -41,6 +43,7 @@ export const styles = theme => ({ cursor: 'default', }, }, + /* Styles applied to the `Input` component `selectMenu` class. */ selectMenu: { width: 'auto', // Fix Safari textOverflow textOverflow: 'ellipsis', @@ -48,7 +51,9 @@ export const styles = theme => ({ overflow: 'hidden', minHeight: '1.1875em', // Reset (19px), match the native input line-height }, + /* Styles applied to the `Input` component `disabled` class. */ disabled: {}, + /* Styles applied to the `Input` component `icon` class. */ icon: { // We use a position absolute over a flexbox in order to forward the pointer events // to the input. diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js index 7850a7768c40a3..78bc030d6f8561 100644 --- a/packages/material-ui/src/Paper/Paper.js +++ b/packages/material-ui/src/Paper/Paper.js @@ -13,9 +13,11 @@ export const styles = theme => { }); return { + /* Styles applied to the root element. */ root: { backgroundColor: theme.palette.background.paper, }, + /* Styles applied to the root element if `square={false}`. */ rounded: { borderRadius: theme.shape.borderRadius, }, diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index f53218bd4dfa48..3aa73d393331e8 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -66,6 +66,7 @@ function getAnchorEl(anchorEl) { } export const styles = { + /* Styles applied to the `Paper` component. */ paper: { position: 'absolute', overflowY: 'auto', diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 726988a9c6d5f9..7edbe8a0e86965 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -8,11 +8,15 @@ import { capitalize } from '../utils/helpers'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { color: theme.palette.text.secondary, }, + /* Styles applied to the root element if `checked={true}`. */ checked: {}, + /* Styles applied to the root element if `disabled={true}`. */ disabled: {}, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { '&$checked': { color: theme.palette.primary.main, @@ -21,6 +25,7 @@ export const styles = theme => ({ color: theme.palette.action.disabled, }, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { '&$checked': { color: theme.palette.secondary.main, diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index f76c6bca719f3f..1c8a1fe26f6398 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -26,6 +26,7 @@ export const styles = theme => { }; return { + /* Styles applied to the root element. */ root: { zIndex: theme.zIndex.snackbar, position: 'fixed', @@ -35,18 +36,21 @@ export const styles = theme => { justifyContent: 'center', alignItems: 'center', }, + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. */ anchorOriginTopCenter: { ...top, [theme.breakpoints.up('md')]: { ...center, }, }, + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`. */ anchorOriginBottomCenter: { ...bottom, [theme.breakpoints.up('md')]: { ...center, }, }, + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`. */ anchorOriginTopRight: { ...top, ...right, @@ -56,6 +60,7 @@ export const styles = theme => { ...rightSpace, }, }, + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`. */ anchorOriginBottomRight: { ...bottom, ...right, @@ -65,6 +70,7 @@ export const styles = theme => { ...rightSpace, }, }, + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`. */ anchorOriginTopLeft: { ...top, ...left, @@ -74,6 +80,7 @@ export const styles = theme => { ...leftSpace, }, }, + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`. */ anchorOriginBottomLeft: { ...bottom, ...left, diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index 0aedf535cdc188..f76db424b2f972 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -13,6 +13,7 @@ export const styles = theme => { const backgroundColor = emphasize(theme.palette.background.default, emphasis); return { + /* Styles applied to the root element. */ root: { color: theme.palette.getContrastText(backgroundColor), backgroundColor, @@ -29,9 +30,11 @@ export const styles = theme => { flexGrow: 1, }, }, + /* Styles applied to the message wrapper element. */ message: { padding: '8px 0', }, + /* Styles applied to the action wrapper element if `action` is provided. */ action: { display: 'flex', alignItems: 'center', diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js index 83578980e0e622..1748a817df5ed0 100644 --- a/packages/material-ui/src/Step/Step.js +++ b/packages/material-ui/src/Step/Step.js @@ -5,7 +5,9 @@ import warning from 'warning'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: {}, + /* Styles applied to the root element if `orientation="horizontal"`. */ horizontal: { paddingLeft: 8, paddingRight: 8, @@ -16,7 +18,9 @@ export const styles = { paddingRight: 0, }, }, + /* Styles applied to the root element if `orientation="vertical"`. */ vertical: {}, + /* Styles applied to the root element if `alternativeLabel={true}`. */ alternativeLabel: { flex: 1, position: 'relative', diff --git a/packages/material-ui/src/StepButton/StepButton.js b/packages/material-ui/src/StepButton/StepButton.js index c29590a6a6a26d..2ec881c644cb5d 100644 --- a/packages/material-ui/src/StepButton/StepButton.js +++ b/packages/material-ui/src/StepButton/StepButton.js @@ -9,15 +9,20 @@ import StepLabel from '../StepLabel'; import { isMuiElement } from '../utils/reactHelpers'; export const styles = { + /* Styles applied to the root element. */ root: { width: '100%', padding: '24px 16px', margin: '-24px -16px', boxSizing: 'content-box', }, + /* Styles applied to the root element if `orientation="horizontal"`. */ + horizontal: {}, + /* Styles applied to the root element if `orientation="vertical"`. */ vertical: { justifyContent: 'flex-start', }, + /* Styles applied to the `ButtonBase` touch-ripple. */ touchRipple: { color: 'rgba(0, 0, 0, 0.3)', }, @@ -58,13 +63,7 @@ function StepButton(props) { {child} diff --git a/packages/material-ui/src/StepConnector/StepConnector.js b/packages/material-ui/src/StepConnector/StepConnector.js index 9d23078cec6ddf..d606e8ac179df8 100644 --- a/packages/material-ui/src/StepConnector/StepConnector.js +++ b/packages/material-ui/src/StepConnector/StepConnector.js @@ -4,28 +4,35 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { flex: '1 1 auto', }, + /* Styles applied to the root element if `orientation="horizontal"`. */ horizontal: {}, + /* Styles applied to the root element if `orientation="vertical"`. */ vertical: { marginLeft: 12, // half icon padding: '0 0 8px', }, + /* Styles applied to the root element if `alternativeLabel={true}`. */ alternativeLabel: { position: 'absolute', top: 8 + 4, left: 'calc(50% + 20px)', right: 'calc(-50% + 20px)', }, + /* Styles applied to the line element. */ line: { display: 'block', borderColor: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], }, + /* Styles applied to the root element if `orientation="horizontal"`. */ lineHorizontal: { borderTopStyle: 'solid', borderTopWidth: 1, }, + /* Styles applied to the root element if `orientation="vertical"`. */ lineVertical: { borderLeftStyle: 'solid', borderLeftWidth: 1, diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js index 34fa520389f8b6..5396b0213b105e 100644 --- a/packages/material-ui/src/StepContent/StepContent.js +++ b/packages/material-ui/src/StepContent/StepContent.js @@ -6,6 +6,7 @@ import Collapse from '../Collapse'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { marginTop: 8, marginLeft: 12, // half icon @@ -15,9 +16,11 @@ export const styles = theme => ({ theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600] }`, }, + /* Styles applied to the root element if `last={true}` (controlled by `Step`). */ last: { borderLeft: 'none', }, + /* Styles applied to the Transition component. */ transition: {}, }); diff --git a/packages/material-ui/src/StepIcon/StepIcon.js b/packages/material-ui/src/StepIcon/StepIcon.js index 76858f4eb3e0de..19cfa0b6638a4c 100644 --- a/packages/material-ui/src/StepIcon/StepIcon.js +++ b/packages/material-ui/src/StepIcon/StepIcon.js @@ -7,6 +7,7 @@ import withStyles from '../styles/withStyles'; import SvgIcon from '../SvgIcon'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'block', color: theme.palette.text.disabled, @@ -20,13 +21,17 @@ export const styles = theme => ({ color: theme.palette.error.main, }, }, + /* Styles applied to the SVG text element. */ text: { fill: theme.palette.primary.contrastText, fontSize: theme.typography.caption.fontSize, fontFamily: theme.typography.fontFamily, }, + /* Styles applied to the root element if `active={true}`. */ active: {}, + /* Styles applied to the root element if `completed={true}`. */ completed: {}, + /* Styles applied to the root element if `error={true}`. */ error: {}, }); diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js index 3a067c0c5226bb..fbc3fd76688ce5 100644 --- a/packages/material-ui/src/StepLabel/StepLabel.js +++ b/packages/material-ui/src/StepLabel/StepLabel.js @@ -6,6 +6,7 @@ import Typography from '../Typography'; import StepIcon from '../StepIcon'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'flex', alignItems: 'center', @@ -16,13 +17,11 @@ export const styles = theme => ({ cursor: 'default', }, }, + /* Styles applied to the root element if `orientation="horiizontal". */ horizontal: {}, + /* Styles applied to the root element if `orientation="vertical". */ vertical: {}, - active: {}, - completed: {}, - alternativeLabel: {}, - error: {}, - disabled: {}, + /* Styles applied to the `Typography` component which wraps `children`. */ label: { color: theme.palette.text.secondary, '&$active': { @@ -41,12 +40,24 @@ export const styles = theme => ({ color: theme.palette.error.main, }, }, + /* Styles applied to the `Typography` component if `active={true}`. */ + active: {}, + /* Styles applied to the `Typography` component if `completed={true}`. */ + completed: {}, + /* Styles applied to the root element and `Typography` component if `error={true}`. */ + error: {}, + /* Styles applied to the root element and `Typography` component if `disabled={true}`. */ + disabled: {}, + /* Styles applied to the `icon` container element. */ iconContainer: { paddingRight: 8, '&$alternativeLabel': { paddingRight: 0, }, }, + /* Styles applied to the root & icon container and `Typography` if `alternativeLabel={true}`. */ + alternativeLabel: {}, + /* Styles applied to the container element which wraps `Typography` and `optional`. */ labelContainer: { width: '100%', }, diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js index 731cebd0569957..678ff71d8fec40 100644 --- a/packages/material-ui/src/Stepper/Stepper.js +++ b/packages/material-ui/src/Stepper/Stepper.js @@ -8,17 +8,21 @@ import Paper from '../Paper'; import StepConnector from '../StepConnector'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'flex', padding: 24, }, + /* Styles applied to the root element if `orientation="horizontal"`. */ horizontal: { flexDirection: 'row', alignItems: 'center', }, + /* Styles applied to the root element if `orientation="vertical"`. */ vertical: { flexDirection: 'column', }, + /* Styles applied to the root element if `alternativeLabel={true}`. */ alternativeLabel: { alignItems: 'flex-start', }, diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 8dc722701b9ef3..ee29056981a9a5 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -5,6 +5,7 @@ import withStyles from '../styles/withStyles'; import { capitalize } from '../utils/helpers'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { userSelect: 'none', width: '1em', @@ -17,21 +18,27 @@ export const styles = theme => ({ duration: theme.transitions.duration.shorter, }), }, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { color: theme.palette.primary.main, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { color: theme.palette.secondary.main, }, + /* Styles applied to the root element if `color="saction"`. */ colorAction: { color: theme.palette.action.active, }, + /* Styles applied to the root element if `color="error"`. */ colorError: { color: theme.palette.error.main, }, + /* Styles applied to the root element if `color="disabled"`. */ colorDisabled: { color: theme.palette.action.disabled, }, + /* Styles applied to the root element if `fontSize="inherit"`. */ fontSizeInherit: { fontSize: 'inherit', }, @@ -54,7 +61,7 @@ function SvgIcon(props) { const className = classNames( classes.root, { - [classes[`fontSize${capitalize(fontSize)}`]]: fontSize !== 'default', + [classes.fontSizeInherit]: fontSize === 'inherit', [classes[`color${capitalize(color)}`]]: color !== 'inherit', }, classNameProp, diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js index 37b1d2f819762e..9e45df613d7193 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js +++ b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js @@ -6,6 +6,7 @@ import { capitalize } from '../utils/helpers'; import { isHorizontal } from '../Drawer/Drawer'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { position: 'fixed', top: 0, diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index ca83c97de90a44..d003bd59af957f 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -6,6 +6,7 @@ import { capitalize } from '../utils/helpers'; import SwitchBase from '../internal/SwitchBase'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'inline-flex', width: 62, @@ -14,6 +15,7 @@ export const styles = theme => ({ // For correct alignment with the text. verticalAlign: 'middle', }, + /* Styles used to create the `icon` passed to the internal `SwitchBase` component `icon` prop. */ icon: { boxShadow: theme.shadows[1], backgroundColor: 'currentColor', @@ -21,9 +23,11 @@ export const styles = theme => ({ height: 20, borderRadius: '50%', }, + /* Styles applied the icon element component if `checked={true}`. */ iconChecked: { boxShadow: theme.shadows[2], }, + /* Styles applied to the internal `SwitchBase` component's `root` class. */ switchBase: { zIndex: 1, color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400], @@ -31,12 +35,14 @@ export const styles = theme => ({ duration: theme.transitions.duration.shortest, }), }, + /* Styles applied to the internal `SwitchBase` component's `checked` class. */ checked: { transform: 'translateX(14px)', '& + $bar': { opacity: 0.5, }, }, + /* Styles applied to the internal SwitchBase component's root element if `color="primary"`. */ colorPrimary: { '&$checked': { color: theme.palette.primary.main, @@ -45,6 +51,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the internal SwitchBase component's root element if `color="secondary"`. */ colorSecondary: { '&$checked': { color: theme.palette.secondary.main, @@ -53,6 +60,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the internal SwitchBase component's disabled class. */ disabled: { '& + $bar': { opacity: theme.palette.type === 'light' ? 0.12 : 0.1, @@ -68,6 +76,7 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the bar element. */ bar: { borderRadius: 14 / 2, display: 'block', diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js index 8962707c5f366a..8943e7335928ba 100644 --- a/packages/material-ui/src/Tab/Tab.js +++ b/packages/material-ui/src/Tab/Tab.js @@ -9,6 +9,7 @@ import { capitalize } from '../utils/helpers'; import unsupportedProp from '../utils/unsupportedProp'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { ...theme.typography.button, maxWidth: 264, @@ -22,9 +23,11 @@ export const styles = theme => ({ minWidth: 160, }, }, + /* Styles applied to the root element if both `icon` and `label` are provided. */ labelIcon: { minHeight: 72, }, + /* Styles applied to the root element if `textColor="inherit"`. */ textColorInherit: { color: 'inherit', opacity: 0.7, @@ -35,6 +38,7 @@ export const styles = theme => ({ opacity: 0.4, }, }, + /* Styles applied to the root element if `textColor="primary"`. */ textColorPrimary: { color: theme.palette.text.secondary, '&$selected': { @@ -44,6 +48,7 @@ export const styles = theme => ({ color: theme.palette.text.disabled, }, }, + /* Styles applied to the root element if `textColor="secondary"`. */ textColorSecondary: { color: theme.palette.text.secondary, '&$selected': { @@ -53,13 +58,17 @@ export const styles = theme => ({ color: theme.palette.text.disabled, }, }, + /* Styles applied to the root element if `selected={true}` (controlled by the Tabs component). */ selected: {}, + /* Styles applied to the root element if `disabled={true}` (controlled by the Tabs component). */ disabled: {}, + /* Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component). */ fullWidth: { flexShrink: 1, flexGrow: 1, maxWidth: 'auto', }, + /* Styles applied to the `icon` and `label`'s wrapper element. */ wrapper: { display: 'inline-flex', alignItems: 'center', @@ -67,6 +76,7 @@ export const styles = theme => ({ width: '100%', flexDirection: 'column', }, + /* Styles applied to the label container element if `label` is provided. */ labelContainer: { paddingTop: 6, paddingBottom: 6, @@ -77,6 +87,7 @@ export const styles = theme => ({ paddingRight: 24, }, }, + /* Styles applied to the label wrapper element if `label` is provided. */ label: { fontSize: theme.typography.pxToRem(14), whiteSpace: 'normal', @@ -84,6 +95,7 @@ export const styles = theme => ({ fontSize: theme.typography.pxToRem(13), }, }, + /* Styles applied to the label wrapper element if `label` is provided and the text is wrapped. */ labelWrapped: { [theme.breakpoints.down('sm')]: { fontSize: theme.typography.pxToRem(12), diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index f9dfa6d37e5183..f3e59ee03643a2 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'table', fontFamily: theme.typography.fontFamily, diff --git a/packages/material-ui/src/TableBody/TableBody.js b/packages/material-ui/src/TableBody/TableBody.js index 5090d85434632c..3609ed5b408fd9 100644 --- a/packages/material-ui/src/TableBody/TableBody.js +++ b/packages/material-ui/src/TableBody/TableBody.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'table-row-group', }, diff --git a/packages/material-ui/src/TableCell/TableCell.js b/packages/material-ui/src/TableCell/TableCell.js index 52bbf6989c5d49..80507ea035b0c6 100644 --- a/packages/material-ui/src/TableCell/TableCell.js +++ b/packages/material-ui/src/TableCell/TableCell.js @@ -6,6 +6,7 @@ import { capitalize } from '../utils/helpers'; import { darken, fade, lighten } from '../styles/colorManipulator'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'table-cell', verticalAlign: 'inherit', @@ -23,34 +24,41 @@ export const styles = theme => ({ paddingRight: 24, }, }, + /* Styles applied to the root element if `variant="head"` or `context.table.head`. */ head: { color: theme.palette.text.secondary, fontSize: theme.typography.pxToRem(12), fontWeight: theme.typography.fontWeightMedium, }, + /* Styles applied to the root element if `variant="body"` or `context.table.body`. */ body: { color: theme.palette.text.primary, fontSize: theme.typography.pxToRem(13), fontWeight: theme.typography.fontWeightRegular, }, + /* Styles applied to the root element if `variant="footer"` or `context.table.footer`. */ footer: { borderBottom: 0, color: theme.palette.text.secondary, fontSize: theme.typography.pxToRem(12), }, + /* Styles applied to the root element if `numeric={true}`. */ numeric: { textAlign: 'right', flexDirection: 'row-reverse', // can be dynamically inherited at runtime by contents }, + /* Styles applied to the root element if `padding="dense"`. */ paddingDense: { paddingRight: 24, }, + /* Styles applied to the root element if `padding="checkbox"`. */ paddingCheckbox: { padding: '0 12px', '&:last-child': { paddingRight: 12, }, }, + /* Styles applied to the root element if `padding="none"`. */ paddingNone: { padding: 0, '&:last-child': { diff --git a/packages/material-ui/src/TableFooter/TableFooter.js b/packages/material-ui/src/TableFooter/TableFooter.js index 9754ebcfd68bfb..fc7e7e80322ed0 100644 --- a/packages/material-ui/src/TableFooter/TableFooter.js +++ b/packages/material-ui/src/TableFooter/TableFooter.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'table-footer-group', }, diff --git a/packages/material-ui/src/TableHead/TableHead.js b/packages/material-ui/src/TableHead/TableHead.js index fbd9e92cb623dd..84e51425e6617a 100644 --- a/packages/material-ui/src/TableHead/TableHead.js +++ b/packages/material-ui/src/TableHead/TableHead.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = { + /* Styles applied to the root element. */ root: { display: 'table-header-group', }, diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index 2be691a93e7ef4..783054e8c395a6 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -12,6 +12,7 @@ import Typography from '../Typography'; import TablePaginationActions from '../TablePaginationActions'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { fontSize: theme.typography.pxToRem(12), // Increase the specificity to override TableCell. @@ -19,34 +20,43 @@ export const styles = theme => ({ padding: 0, }, }, + /* Styles applied to the Toolbar component. */ toolbar: { height: 56, minHeight: 56, paddingRight: 2, }, + /* Styles applied to the spacer element. */ spacer: { flex: '1 1 100%', }, - menuItem: {}, + /* Styles applied to the caption Typography components if `variant="caption"`. */ caption: { flexShrink: 0, }, - input: { - fontSize: 'inherit', - flexShrink: 0, - }, + /* Styles applied to the Select component `root` class. */ selectRoot: { marginRight: 32, marginLeft: 8, color: theme.palette.text.secondary, }, + /* Styles applied to the Select component `select` class. */ select: { paddingLeft: 8, paddingRight: 16, }, + /* Styles applied to the Select component `icon` class. */ selectIcon: { top: 1, }, + /* Styles applied to the Input component. */ + input: { + fontSize: 'inherit', + flexShrink: 0, + }, + /* Styles applied to the MenuItem component. */ + menuItem: {}, + /* Styles applied to the internal `TablePaginationActions` component. */ actions: { flexShrink: 0, color: theme.palette.text.secondary, diff --git a/packages/material-ui/src/TableRow/TableRow.js b/packages/material-ui/src/TableRow/TableRow.js index 041604b654243f..f9490c47bfd241 100644 --- a/packages/material-ui/src/TableRow/TableRow.js +++ b/packages/material-ui/src/TableRow/TableRow.js @@ -4,6 +4,7 @@ import classNames from 'classnames'; import withStyles from '../styles/withStyles'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { color: 'inherit', display: 'table-row', @@ -24,11 +25,15 @@ export const styles = theme => ({ : 'rgba(255, 255, 255, 0.14)', }, }, + /* Styles applied to the root element if `context.table` & `selected={true}`. */ selected: {}, + /* Styles applied to the root element if `context.table` & `hover={true}`. */ hover: {}, + /* Styles applied to the root element if `context.table.head`. */ head: { height: 56, }, + /* Styles applied to the root element if `context.table.footer`. */ footer: { height: 56, }, diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js index 154d39d52e770a..cdfd45b791d46b 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js @@ -9,6 +9,7 @@ import ButtonBase from '../ButtonBase'; import { capitalize } from '../utils/helpers'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { cursor: 'pointer', display: 'inline-flex', @@ -22,12 +23,14 @@ export const styles = theme => ({ color: theme.palette.text.primary, }, }, + /* Styles applied to the root element if `active={true}`. */ active: { color: theme.palette.text.primary, '& $icon': { opacity: 1, }, }, + /* Styles applied to the icon component. */ icon: { height: 16, marginRight: 4, @@ -39,9 +42,11 @@ export const styles = theme => ({ userSelect: 'none', width: 16, }, + /* Styles applied to the icon component if `direction="desc"`. */ iconDirectionDesc: { transform: 'rotate(0deg)', }, + /* Styles applied to the icon component if `direction="asc"`. */ iconDirectionAsc: { transform: 'rotate(180deg)', }, diff --git a/packages/material-ui/src/Tabs/TabIndicator.js b/packages/material-ui/src/Tabs/TabIndicator.js index 67a89c0ccd8c1a..9d12f3a0675034 100644 --- a/packages/material-ui/src/Tabs/TabIndicator.js +++ b/packages/material-ui/src/Tabs/TabIndicator.js @@ -5,6 +5,7 @@ import withStyles from '../styles/withStyles'; import { capitalize } from '../utils/helpers'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { position: 'absolute', height: 2, @@ -13,9 +14,11 @@ export const styles = theme => ({ transition: theme.transitions.create(), willChange: 'left, width', }, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { backgroundColor: theme.palette.primary.main, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { backgroundColor: theme.palette.secondary.main, }, diff --git a/packages/material-ui/src/Tabs/TabScrollButton.js b/packages/material-ui/src/Tabs/TabScrollButton.js index d7a1c6438a0e55..bc08c3ecd1f4ce 100644 --- a/packages/material-ui/src/Tabs/TabScrollButton.js +++ b/packages/material-ui/src/Tabs/TabScrollButton.js @@ -7,6 +7,7 @@ import withStyles from '../styles/withStyles'; import ButtonBase from '../ButtonBase'; export const styles = { + /* Styles applied to the root element. */ root: { color: 'inherit', flex: '0 0 56px', diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 5ccadf20bb7ed6..ae0a5176f6d93b 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -14,36 +14,45 @@ import TabIndicator from './TabIndicator'; import TabScrollButton from './TabScrollButton'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { overflow: 'hidden', minHeight: 48, WebkitOverflowScrolling: 'touch', // Add iOS momentum scrolling. }, + /* Styles applied to the flex container element. */ flexContainer: { display: 'flex', }, + /* Styles applied to the flex container element if `centered={true}` & `scrollable={false}`. */ + centered: { + justifyContent: 'center', + }, + /* Styles applied to the tablist element. */ scroller: { position: 'relative', display: 'inline-block', flex: '1 1 auto', whiteSpace: 'nowrap', }, + /* Styles applied to the tablist element if `scrollable={false}`. */ fixed: { overflowX: 'hidden', width: '100%', }, + /* Styles applied to the tablist element if `scrollable={true}`. */ scrollable: { overflowX: 'scroll', }, - centered: { - justifyContent: 'center', - }, + /* Styles applied to the `ScrollButtonComponent` component. */ scrollButtons: {}, + /* Styles applied to the `ScrollButtonComponent` component if `sscrollButtons="auto"`. */ scrollButtonsAuto: { [theme.breakpoints.down('xs')]: { display: 'none', }, }, + /* Styles applied to the `TabIndicator` component. */ indicator: {}, }); @@ -297,13 +306,13 @@ class Tabs extends React.Component { ); const className = classNames(classes.root, classNameProp); + const flexContainerClassName = classNames(classes.flexContainer, { + [classes.centered]: centered && !scrollable, + }); const scrollerClassName = classNames(classes.scroller, { [classes.fixed]: !scrollable, [classes.scrollable]: scrollable, }); - const flexContainerClassName = classNames(classes.flexContainer, { - [classes.centered]: centered && !scrollable, - }); const indicator = ( ({ + /* Styles applied to the root element. */ root: { position: 'relative', display: 'flex', alignItems: 'center', }, + /* Styles applied to the root element if `disableGutters={false}`. */ gutters: theme.mixins.gutters(), + /* Styles applied to the root element if `variant="regular"`. */ regular: theme.mixins.toolbar, + /* Styles applied to the root element if `variant="dense"`. */ dense: { minHeight: 48, }, diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index fc50f336ea7203..3665010fc4b339 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -10,10 +10,12 @@ import Grow from '../Grow'; import Popper from '../Popper'; export const styles = theme => ({ + /* Styles applied to the Popper component. */ popper: { zIndex: theme.zIndex.tooltip, opacity: 0.9, }, + /* Styles applied to the tooltip (label wrapper) element. */ tooltip: { backgroundColor: theme.palette.grey[700], borderRadius: theme.shape.borderRadius, @@ -23,11 +25,13 @@ export const styles = theme => ({ fontSize: theme.typography.pxToRem(10), lineHeight: `${theme.typography.round(14 / 10)}em`, }, + /* Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. */ touch: { padding: '8px 16px', fontSize: theme.typography.pxToRem(14), lineHeight: `${theme.typography.round(16 / 14)}em`, }, + /* Styles applied to the tooltip (label wrapper) element if `placement` contains "left". */ tooltipPlacementLeft: { transformOrigin: 'right center', margin: '0 24px ', @@ -35,6 +39,7 @@ export const styles = theme => ({ margin: '0 14px', }, }, + /* Styles applied to the tooltip (label wrapper) element if `placement` contains "right". */ tooltipPlacementRight: { transformOrigin: 'left center', margin: '0 24px', @@ -42,6 +47,7 @@ export const styles = theme => ({ margin: '0 14px', }, }, + /* Styles applied to the tooltip (label wrapper) element if `placement` contains "top". */ tooltipPlacementTop: { transformOrigin: 'center bottom', margin: '24px 0', @@ -49,6 +55,7 @@ export const styles = theme => ({ margin: '14px 0', }, }, + /* Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". */ tooltipPlacementBottom: { transformOrigin: 'center top', margin: '24px 0', @@ -305,7 +312,7 @@ class Tooltip extends React.Component { warning( !children.props.title, [ - 'Material-UI: you have been providing a `title` property to the child of .', + 'Material-UI: you have provided a `title` property to the child of .', `Remove this title property \`${children.props.title}\` or the Tooltip component.`, ].join('\n'), ); diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js index 427123552be9e9..3d9a9eee98e1a1 100644 --- a/packages/material-ui/src/Typography/Typography.js +++ b/packages/material-ui/src/Typography/Typography.js @@ -5,56 +5,80 @@ import withStyles from '../styles/withStyles'; import { capitalize } from '../utils/helpers'; export const styles = theme => ({ + /* Styles applied to the root element. */ root: { display: 'block', margin: 0, }, + /* Styles applied to the root element if `variant="display4"`. */ display4: theme.typography.display4, + /* Styles applied to the root element if `variant="display3"`. */ display3: theme.typography.display3, + /* Styles applied to the root element if `variant="display2"`. */ display2: theme.typography.display2, + /* Styles applied to the root element if `variant="display1"`. */ display1: theme.typography.display1, + /* Styles applied to the root element if `variant="headline"`. */ headline: theme.typography.headline, + /* Styles applied to the root element if `variant="title"`. */ title: theme.typography.title, + /* Styles applied to the root element if `variant="subheading"`. */ subheading: theme.typography.subheading, + /* Styles applied to the root element if `variant="body2"`. */ body2: theme.typography.body2, + /* Styles applied to the root element if `variant="body1"`. */ body1: theme.typography.body1, + /* Styles applied to the root element if `variant="caption"`. */ caption: theme.typography.caption, + /* Styles applied to the root element if `variant="button"`. */ button: theme.typography.button, + /* Styles applied to the root element if `align="left"`. */ alignLeft: { textAlign: 'left', }, + /* Styles applied to the root element if `align="center"`. */ alignCenter: { textAlign: 'center', }, + /* Styles applied to the root element if `align="right"`. */ alignRight: { textAlign: 'right', }, + /* Styles applied to the root element if `align="justify"`. */ alignJustify: { textAlign: 'justify', }, + /* Styles applied to the root element if `align="nowrap"`. */ noWrap: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }, + /* Styles applied to the root element if `gutterBottom={true}`. */ gutterBottom: { marginBottom: '0.35em', }, + /* Styles applied to the root element if `paragraph={true}`. */ paragraph: { marginBottom: 16, }, + /* Styles applied to the root element if `color="inherit"`. */ colorInherit: { color: 'inherit', }, + /* Styles applied to the root element if `color="primary"`. */ colorPrimary: { color: theme.palette.primary.main, }, + /* Styles applied to the root element if `color="secondary"`. */ colorSecondary: { color: theme.palette.secondary.main, }, + /* Styles applied to the root element if `color="textSecondary"`. */ colorTextSecondary: { color: theme.palette.text.secondary, }, + /* Styles applied to the root element if `color="error"`. */ colorError: { color: theme.palette.error.main, }, diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js index cd5e0565133bb0..7903ede06cc6db 100644 --- a/packages/material-ui/src/internal/SwitchBase.js +++ b/packages/material-ui/src/internal/SwitchBase.js @@ -31,6 +31,9 @@ export const styles = { }, }; +/** + * @ignore - internal component. + */ class SwitchBase extends React.Component { input = null; diff --git a/pages/api/app-bar.md b/pages/api/app-bar.md index f3740d5364ae95..1e37fe327b533b 100644 --- a/pages/api/app-bar.md +++ b/pages/api/app-bar.md @@ -26,14 +26,18 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `positionFixed` -- `positionAbsolute` -- `positionSticky` -- `positionStatic` -- `colorDefault` -- `colorPrimary` -- `colorSecondary` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| positionFixed | Styles applied to the root element if `position="fixed"`. +| positionAbsolute | Styles applied to the root element if `position="absolute"`. +| positionSticky | Styles applied to the root element if `position="sticky"`. +| positionStatic | Styles applied to the root element if `position="static"`. +| colorDefault | Styles applied to the root element if `color="default"`. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/AppBar/AppBar.js) diff --git a/pages/api/avatar.md b/pages/api/avatar.md index 5dec0924fa0cac..04aa0b71e52ef7 100644 --- a/pages/api/avatar.md +++ b/pages/api/avatar.md @@ -19,7 +19,7 @@ title: Avatar API | children | node |   | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.
This can be an element, or just a string. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | | component | union: string |
 func |
 object
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| imgProps | object |   | Attributes applied to the `img` element when the component is used to display an image. | +| imgProps | object |   | Attributes applied to the `img` element if the component is used to display an image. | | sizes | string |   | The `sizes` attribute for the `img` element. | | src | string |   | The `src` attribute for the `img` element. | | srcSet | string |   | The `srcSet` attribute for the `img` element. | @@ -30,9 +30,13 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `colorDefault` -- `img` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| colorDefault | Styles applied to the root element if `color="default"`. +| img | Styles applied to the img element if either `src` or `srcSet` is defined. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Avatar/Avatar.js) diff --git a/pages/api/backdrop.md b/pages/api/backdrop.md index 37f1b4e588978d..fa0bdaa03267f9 100644 --- a/pages/api/backdrop.md +++ b/pages/api/backdrop.md @@ -26,8 +26,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `invisible` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| invisible | Styles applied to the root element if `invisible={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Backdrop/Backdrop.js) diff --git a/pages/api/badge.md b/pages/api/badge.md index 4968fe8964ae28..04b45c2acc0576 100644 --- a/pages/api/badge.md +++ b/pages/api/badge.md @@ -27,11 +27,15 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `badge` -- `colorPrimary` -- `colorSecondary` -- `colorError` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| badge | Styles applied to the badge `span` element. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. +| colorError | Styles applied to the root element if `color="error"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Badge/Badge.js) diff --git a/pages/api/bottom-navigation-action.md b/pages/api/bottom-navigation-action.md index a963b268abd02e..53f89d05cbb9bd 100644 --- a/pages/api/bottom-navigation-action.md +++ b/pages/api/bottom-navigation-action.md @@ -28,11 +28,15 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `selected` -- `iconOnly` -- `wrapper` -- `label` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| selected | Styles applied to the root element if selected. +| iconOnly | Styles applied to the root element if `showLabel={false}` and not selected. +| wrapper | Styles applied to the span element that wraps the icon and label. +| label | Styles applied to the label's span element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js) diff --git a/pages/api/bottom-navigation.md b/pages/api/bottom-navigation.md index 305706a3fbfb84..bceff55620ef06 100644 --- a/pages/api/bottom-navigation.md +++ b/pages/api/bottom-navigation.md @@ -27,7 +27,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/BottomNavigation/BottomNavigation.js) diff --git a/pages/api/button-base.md b/pages/api/button-base.md index cd96329f3b5242..9cfd9e847dd1f6 100644 --- a/pages/api/button-base.md +++ b/pages/api/button-base.md @@ -27,7 +27,7 @@ It contains a load of style reset and some focus/ripple logic. | disableRipple | bool | false | If `true`, the ripple effect will be disabled. | | disableTouchRipple | bool | false | If `true`, the touch ripple effect will be disabled. | | focusRipple | bool | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. | -| focusVisibleClassName | string |   | This property can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus throught a keyboard interaction. It's a polyfill for the [CSS :focus-visible feature](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rational for using this feature [is explain here](https://github.com/WICG/focus-visible/blob/master/explainer.md). | +| focusVisibleClassName | string |   | This property can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus through a keyboard interaction. It's a polyfill for the [CSS :focus-visible feature](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rational for using this feature [is explain here](https://github.com/WICG/focus-visible/blob/master/explainer.md). | | onFocusVisible | func |   | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | | TouchRippleProps | object |   | Properties applied to the `TouchRipple` element. | | type | string | 'button' | Used to control the button's purpose. This property passes the value to the `type` attribute of the native button component. Valid property values include `button`, `submit`, and `reset`. | @@ -38,9 +38,13 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `disabled` -- `focusVisible` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| disabled | Styles applied to the root element if `disabled={true}`. +| focusVisible | Styles applied to the root element if keyboard focused. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ButtonBase/ButtonBase.js) diff --git a/pages/api/button.md b/pages/api/button.md index 2ed50f03fd5c24..6a6693aa496855 100644 --- a/pages/api/button.md +++ b/pages/api/button.md @@ -34,30 +34,34 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `label` -- `text` -- `textPrimary` -- `textSecondary` -- `flat` -- `flatPrimary` -- `flatSecondary` -- `outlined` -- `contained` -- `containedPrimary` -- `containedSecondary` -- `raised` -- `raisedPrimary` -- `raisedSecondary` -- `fab` -- `extendedFab` -- `focusVisible` -- `disabled` -- `colorInherit` -- `mini` -- `sizeSmall` -- `sizeLarge` -- `fullWidth` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| label | Styles applied to the span element that wraps the children. +| text | Styles applied to the root element if `variant="text"`. +| textPrimary | Styles applied to the root element if `variant="text"` and `color="primary"`. +| textSecondary | Styles applied to the root element if `variant="text"` and `color="secondary"`. +| flat | Styles applied to the root element for backwards compatibility with legacy variant naming. +| flatPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming. +| flatSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming. +| outlined | Styles applied to the root element if `variant="outlined"`. +| contained | Styles applied to the root element if `variant="contained"`. +| containedPrimary | Styles applied to the root element if `variant="contained"` and `color="primary"`. +| containedSecondary | Styles applied to the root element if `variant="contained"` and `color="secondary"`. +| raised | Styles applied to the root element for backwards compatibility with legacy variant naming. +| raisedPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming. +| raisedSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming. +| fab | Styles applied to the root element if `variant="fab"`. +| extendedFab | Styles applied to the root element if `variant="extendedFab"`. +| focusVisible | Styles applied to the ButtonBase root element if the button is keyboard focused. +| disabled | Styles applied to the root element if `disabled={true}`. +| colorInherit | Styles applied to the root element if `color="inherit"`. +| mini | Styles applied to the root element if `size="mini"`. +| sizeSmall | Styles applied to the root element if `size="small"`. +| sizeLarge | Styles applied to the root element if `size="large"`. +| fullWidth | Styles applied to the root element if `fullWidth={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Button/Button.js) diff --git a/pages/api/card-actions.md b/pages/api/card-actions.md index fc037f396edfc0..bd88fdb8f3e3f3 100644 --- a/pages/api/card-actions.md +++ b/pages/api/card-actions.md @@ -25,8 +25,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `action` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| action | Styles applied to the children. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardActions/CardActions.js) diff --git a/pages/api/card-content.md b/pages/api/card-content.md index 3e70a5ad421f2e..5220935fd5ff6d 100644 --- a/pages/api/card-content.md +++ b/pages/api/card-content.md @@ -24,7 +24,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardContent/CardContent.js) diff --git a/pages/api/card-header.md b/pages/api/card-header.md index a47d671b012c53..6764a0bf62e609 100644 --- a/pages/api/card-header.md +++ b/pages/api/card-header.md @@ -31,12 +31,16 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `avatar` -- `action` -- `content` -- `title` -- `subheader` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| avatar | Styles applied to the avatar element. +| action | Styles applied to the action element. +| content | Styles applied to the content wrapper element. +| title | Styles applied to the title Typography element. +| subheader | Styles applied to the subheader Typography element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardHeader/CardHeader.js) diff --git a/pages/api/card-media.md b/pages/api/card-media.md index c15758e1029184..e3d1603c54b358 100644 --- a/pages/api/card-media.md +++ b/pages/api/card-media.md @@ -26,8 +26,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `media` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| media | Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CardMedia/CardMedia.js) diff --git a/pages/api/card.md b/pages/api/card.md index f06779883a06ee..35fc5d6eaa42d6 100644 --- a/pages/api/card.md +++ b/pages/api/card.md @@ -24,7 +24,11 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Card/Card.js) diff --git a/pages/api/checkbox.md b/pages/api/checkbox.md index e5e01eb2bf90ed..ed0fe4a3bce35d 100644 --- a/pages/api/checkbox.md +++ b/pages/api/checkbox.md @@ -37,11 +37,15 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `checked` -- `disabled` -- `colorPrimary` -- `colorSecondary` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| checked | Styles applied to the root element if `checked={true}`. +| disabled | Styles applied to the root element if `disabled={true}`. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Checkbox/Checkbox.js) diff --git a/pages/api/chip.md b/pages/api/chip.md index 6963257abf3f12..f1a24a0d361abf 100644 --- a/pages/api/chip.md +++ b/pages/api/chip.md @@ -30,13 +30,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `clickable` -- `deletable` -- `avatar` -- `avatarChildren` -- `label` -- `deleteIcon` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| clickable | Styles applied to the root element if `onClick` is defined or `clickable={true}`. +| deletable | Styles applied to the root element if `onDelete` is defined. +| avatar | Styles applied to the `avatar` element if `checked={true}`. +| avatarChildren | Styles applied to the `avartar` elements children. +| label | Styles applied to the label `span` element`. +| deleteIcon | Styles applied to the `deleteIcon` element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Chip/Chip.js) diff --git a/pages/api/circular-progress.md b/pages/api/circular-progress.md index fa4fc48634c31e..52d7756c7dc1a3 100644 --- a/pages/api/circular-progress.md +++ b/pages/api/circular-progress.md @@ -32,15 +32,19 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `static` -- `indeterminate` -- `colorPrimary` -- `colorSecondary` -- `svg` -- `circle` -- `circleStatic` -- `circleIndeterminate` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| static | Styles applied to the root element if `variant="static"`. +| indeterminate | Styles applied to the root element if `variant="indeterminate"`. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. +| svg | Styles applied to the `svg` element. +| circle | Styles applied to the `circle` svg path. +| circleStatic | Styles applied to the `circle` svg path if `variant="static"`. +| circleIndeterminate | Styles applied to the `circle` svg path if `variant="indeterminate"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/CircularProgress/CircularProgress.js) diff --git a/pages/api/collapse.md b/pages/api/collapse.md index 287c3bc7d74bf3..2aa844e6770392 100644 --- a/pages/api/collapse.md +++ b/pages/api/collapse.md @@ -30,10 +30,14 @@ Any other properties supplied will be spread to the root element ([Transition](h You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `container` -- `entered` -- `wrapper` -- `wrapperInner` + + +| Name | Description | +|:-----|:------------| +| container | Styles applied to the container element. +| entered | Styles applied to the container element when the transition has entered. +| wrapper | Styles applied to the outer wrapper element. +| wrapperInner | Styles applied to the outer wrapper element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Collapse/Collapse.js) diff --git a/pages/api/dialog-actions.md b/pages/api/dialog-actions.md index 9e7be4d9d05f2a..fd9f5440ca3ef4 100644 --- a/pages/api/dialog-actions.md +++ b/pages/api/dialog-actions.md @@ -25,8 +25,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `action` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| action | Styles applied to the children. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/DialogActions/DialogActions.js) diff --git a/pages/api/dialog-content-text.md b/pages/api/dialog-content-text.md index ec2066219dd2ab..9dccbb24f45066 100644 --- a/pages/api/dialog-content-text.md +++ b/pages/api/dialog-content-text.md @@ -24,7 +24,11 @@ Any other properties supplied will be spread to the root element ([Typography](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/DialogContentText/DialogContentText.js) diff --git a/pages/api/dialog-content.md b/pages/api/dialog-content.md index 1acfd231b1fe82..cdcd3cb9cf80bc 100644 --- a/pages/api/dialog-content.md +++ b/pages/api/dialog-content.md @@ -24,7 +24,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/DialogContent/DialogContent.js) diff --git a/pages/api/dialog-title.md b/pages/api/dialog-title.md index d282f2d7af3d52..5ea9d86891e46f 100644 --- a/pages/api/dialog-title.md +++ b/pages/api/dialog-title.md @@ -25,7 +25,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/DialogTitle/DialogTitle.js) diff --git a/pages/api/dialog.md b/pages/api/dialog.md index fac198e9dc1536..d0fec39c72b3ff 100644 --- a/pages/api/dialog.md +++ b/pages/api/dialog.md @@ -44,17 +44,21 @@ Any other properties supplied will be spread to the root element ([Modal](/api/m You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `scrollPaper` -- `scrollBody` -- `paper` -- `paperScrollPaper` -- `paperScrollBody` -- `paperWidthXs` -- `paperWidthSm` -- `paperWidthMd` -- `paperFullWidth` -- `paperFullScreen` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| scrollPaper | Styles applied to the root element if `scroll="paper"`. +| scrollBody | Styles applied to the root element if `scroll="bodyr"`. +| paper | Styles applied to the `Paper` component. +| paperScrollPaper | Styles applied to the `Paper` component if `scroll="paper"`. +| paperScrollBody | Styles applied to the `Paper` component if `scroll="body"`. +| paperWidthXs | Styles applied to the `Paper` component if `maxWidth="xs"`. +| paperWidthSm | Styles applied to the `Paper` component if `maxWidth="sm"`. +| paperWidthMd | Styles applied to the `Paper` component if `maxWidth="md"`. +| paperFullWidth | Styles applied to the `Paper` component if `fullWidth={true}`. +| paperFullScreen | Styles applied to the `Paper` component if `fullScreen={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Dialog/Dialog.js) diff --git a/pages/api/divider.md b/pages/api/divider.md index 7b8f1c6f723084..c51564e6838ccd 100644 --- a/pages/api/divider.md +++ b/pages/api/divider.md @@ -27,10 +27,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `absolute` -- `inset` -- `light` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| absolute | Styles applied to the root element if `absolute={true}`. +| inset | Styles applied to the root element if `inset={true}`. +| light | Styles applied to the root element if `light={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Divider/Divider.js) diff --git a/pages/api/drawer.md b/pages/api/drawer.md index 283157b8424899..d7725cc2d523bf 100644 --- a/pages/api/drawer.md +++ b/pages/api/drawer.md @@ -34,17 +34,21 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `docked` -- `paper` -- `paperAnchorLeft` -- `paperAnchorRight` -- `paperAnchorTop` -- `paperAnchorBottom` -- `paperAnchorDockedLeft` -- `paperAnchorDockedTop` -- `paperAnchorDockedRight` -- `paperAnchorDockedBottom` -- `modal` + + +| Name | Description | +|:-----|:------------| +| docked | Styles applied to the root element if `variant="permanent or persistent"`. +| paper | Styles applied to the `Paper` component. +| paperAnchorLeft | Styles applied to the `Paper` component if `anchor="left"`. +| paperAnchorRight | Styles applied to the `Paper` component if `anchor="right"`. +| paperAnchorTop | Styles applied to the `Paper` component if `anchor="top"`. +| paperAnchorBottom | Styles applied to the `Paper` component if `anchor="bottom"`. +| paperAnchorDockedLeft | Styles applied to the `Paper` component if `anchor="left"` & `variant` is not "temporary". +| paperAnchorDockedTop | Styles applied to the `Paper` component if `anchor="top"` & `variant` is not "temporary". +| paperAnchorDockedRight | Styles applied to the `Paper` component if `anchor="right"` & `variant` is not "temporary". +| paperAnchorDockedBottom | Styles applied to the `Paper` component if `anchor="bottom"` & `variant` is not "temporary". +| modal | Styles applied to the `Modal` component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Drawer/Drawer.js) diff --git a/pages/api/expansion-panel-actions.md b/pages/api/expansion-panel-actions.md index f0cd9d514b3ca8..d279a1b40b6b32 100644 --- a/pages/api/expansion-panel-actions.md +++ b/pages/api/expansion-panel-actions.md @@ -24,8 +24,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `action` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| action | Styles applied to the children. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js) diff --git a/pages/api/expansion-panel-details.md b/pages/api/expansion-panel-details.md index d7c43bb32480ce..8bbfba19966ede 100644 --- a/pages/api/expansion-panel-details.md +++ b/pages/api/expansion-panel-details.md @@ -24,7 +24,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js) diff --git a/pages/api/expansion-panel-summary.md b/pages/api/expansion-panel-summary.md index 93b7f8b697ddcc..cc9e3ef888338b 100644 --- a/pages/api/expansion-panel-summary.md +++ b/pages/api/expansion-panel-summary.md @@ -26,12 +26,16 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `expanded` -- `focused` -- `disabled` -- `content` -- `expandIcon` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| expanded | Styles applied to the root element if `expanded={true}`. +| focused | Styles applied to the root and children wrapper elements when focused. +| disabled | Styles applied to the root element if `disabled={true}`. +| content | Styles applied to the children wrapper element. +| expandIcon | Styles applied to the `IconButton` component when `expandIcon` is supplied. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ExpansionPanelSummary/ExpansionPanelSummary.js) diff --git a/pages/api/expansion-panel.md b/pages/api/expansion-panel.md index bdb281de6160b2..0784386ee8697f 100644 --- a/pages/api/expansion-panel.md +++ b/pages/api/expansion-panel.md @@ -29,9 +29,13 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `expanded` -- `disabled` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| expanded | Styles applied to the root element if `expanded={true}`. +| disabled | Styles applied to the root element if `disabled={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js) diff --git a/pages/api/form-control-label.md b/pages/api/form-control-label.md index 9782dfd0ffdfc6..e442cf19040c08 100644 --- a/pages/api/form-control-label.md +++ b/pages/api/form-control-label.md @@ -32,9 +32,13 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `disabled` -- `label` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| disabled | Styles applied to the root element if `disabled={true}`. +| label | Styles applied to the label's Typography component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormControlLabel/FormControlLabel.js) diff --git a/pages/api/form-control.md b/pages/api/form-control.md index 7abc44681db226..7daf4635419511 100644 --- a/pages/api/form-control.md +++ b/pages/api/form-control.md @@ -37,10 +37,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `marginNormal` -- `marginDense` -- `fullWidth` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| marginNormal | Styles applied to the root element if `margin="normal"`. +| marginDense | Styles applied to the root element if `margin="dense"`. +| fullWidth | Styles applied to the root element if `fullWidth={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormControl/FormControl.js) diff --git a/pages/api/form-group.md b/pages/api/form-group.md index 56e8e90cb5851e..ee51db87af182c 100644 --- a/pages/api/form-group.md +++ b/pages/api/form-group.md @@ -27,8 +27,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `row` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| row | Styles applied to the root element if `row={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormGroup/FormGroup.js) diff --git a/pages/api/form-helper-text.md b/pages/api/form-helper-text.md index dcf7fbf5e6603e..570326e4aa697d 100644 --- a/pages/api/form-helper-text.md +++ b/pages/api/form-helper-text.md @@ -28,10 +28,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `error` -- `disabled` -- `marginDense` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| error | Styles applied to the root element if `error={true}`. +| disabled | Styles applied to the root element if `disabled={true}`. +| marginDense | Styles applied to the root element if `margin="dense"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormHelperText/FormHelperText.js) diff --git a/pages/api/form-label.md b/pages/api/form-label.md index 242199fe47ba85..c6f686dbda9c07 100644 --- a/pages/api/form-label.md +++ b/pages/api/form-label.md @@ -29,11 +29,15 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `focused` -- `disabled` -- `error` -- `asterisk` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| focused | Styles applied to the root element if `focused={true}`. +| disabled | Styles applied to the root element if `disabled={true}`. +| error | Styles applied to the root element if `error={true}`. +| asterisk | Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/FormLabel/FormLabel.js) diff --git a/pages/api/grid-list-tile-bar.md b/pages/api/grid-list-tile-bar.md index 5db5a5dd565ff3..5941cec7871bed 100644 --- a/pages/api/grid-list-tile-bar.md +++ b/pages/api/grid-list-tile-bar.md @@ -28,17 +28,21 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `titlePositionBottom` -- `titlePositionTop` -- `rootSubtitle` -- `titleWrap` -- `titleWrapActionPosLeft` -- `titleWrapActionPosRight` -- `title` -- `subtitle` -- `actionIcon` -- `actionIconActionPosLeft` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| titlePositionBottom | Styles applied to the root element if `titlePosition="bottom"`. +| titlePositionTop | Styles applied to the root element if `titlePosition="top"`. +| rootSubtitle | Styles applied to the root element if a `subtitle` is provided. +| titleWrap | Styles applied to the title and subtitle container element. +| titleWrapActionPosLeft | Styles applied to the container element if `actionPosition="left"`. +| titleWrapActionPosRight | Styles applied to the container element if `actionPosition="right"`. +| title | Styles applied to the title container element. +| subtitle | Styles applied to the subtitle container element. +| actionIcon | Styles applied to the actionIcon if supplied. +| actionIconActionPosLeft | Styles applied to the actionIcon if `actionPosition="left". Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/GridListTileBar/GridListTileBar.js) diff --git a/pages/api/grid-list-tile.md b/pages/api/grid-list-tile.md index cc42e198651e05..cb1f2a31f68fac 100644 --- a/pages/api/grid-list-tile.md +++ b/pages/api/grid-list-tile.md @@ -27,10 +27,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `tile` -- `imgFullHeight` -- `imgFullWidth` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| tile | Styles applied to the `div` element that wraps the children. +| imgFullHeight | Styles applied to an `ing` element child, if if needed to ensure it covers the tile. +| imgFullWidth | Styles applied to an `ing` element child, if if needed to ensure it covers the tile. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/GridListTile/GridListTile.js) diff --git a/pages/api/grid-list.md b/pages/api/grid-list.md index 5fc5c40c96f9c4..922f145a2e39e8 100644 --- a/pages/api/grid-list.md +++ b/pages/api/grid-list.md @@ -28,7 +28,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/GridList/GridList.js) diff --git a/pages/api/grid.md b/pages/api/grid.md index 699442aaaf4031..83a2632ade1f2d 100644 --- a/pages/api/grid.md +++ b/pages/api/grid.md @@ -39,46 +39,50 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `container` -- `item` -- `zeroMinWidth` -- `direction-xs-column` -- `direction-xs-column-reverse` -- `direction-xs-row-reverse` -- `wrap-xs-nowrap` -- `wrap-xs-wrap-reverse` -- `align-items-xs-center` -- `align-items-xs-flex-start` -- `align-items-xs-flex-end` -- `align-items-xs-baseline` -- `align-content-xs-center` -- `align-content-xs-flex-start` -- `align-content-xs-flex-end` -- `align-content-xs-space-between` -- `align-content-xs-space-around` -- `justify-xs-center` -- `justify-xs-flex-end` -- `justify-xs-space-between` -- `justify-xs-space-around` -- `spacing-xs-8` -- `spacing-xs-16` -- `spacing-xs-24` -- `spacing-xs-32` -- `spacing-xs-40` -- `grid-xs-auto` -- `grid-xs-true` -- `grid-xs-1` -- `grid-xs-2` -- `grid-xs-3` -- `grid-xs-4` -- `grid-xs-5` -- `grid-xs-6` -- `grid-xs-7` -- `grid-xs-8` -- `grid-xs-9` -- `grid-xs-10` -- `grid-xs-11` -- `grid-xs-12` + + +| Name | Description | +|:-----|:------------| +| container | Styles applied to the root element if `container={true}`. +| item | Styles applied to the root element if `item={true}`. +| zeroMinWidth | Styles applied to the root element if `zeroMinWidth={true}`. +| direction-xs-column | +| direction-xs-column-reverse | +| direction-xs-row-reverse | +| wrap-xs-nowrap | +| wrap-xs-wrap-reverse | +| align-items-xs-center | +| align-items-xs-flex-start | +| align-items-xs-flex-end | +| align-items-xs-baseline | +| align-content-xs-center | +| align-content-xs-flex-start | +| align-content-xs-flex-end | +| align-content-xs-space-between | +| align-content-xs-space-around | +| justify-xs-center | +| justify-xs-flex-end | +| justify-xs-space-between | +| justify-xs-space-around | +| spacing-xs-8 | +| spacing-xs-16 | +| spacing-xs-24 | +| spacing-xs-32 | +| spacing-xs-40 | +| grid-xs-auto | +| grid-xs-true | +| grid-xs-1 | +| grid-xs-2 | +| grid-xs-3 | +| grid-xs-4 | +| grid-xs-5 | +| grid-xs-6 | +| grid-xs-7 | +| grid-xs-8 | +| grid-xs-9 | +| grid-xs-10 | +| grid-xs-11 | +| grid-xs-12 | Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Grid/Grid.js) diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md index ab42652ee6dfaf..93667967b26f4e 100644 --- a/pages/api/icon-button.md +++ b/pages/api/icon-button.md @@ -28,12 +28,16 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `colorInherit` -- `colorPrimary` -- `colorSecondary` -- `disabled` -- `label` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| colorInherit | Styles applied to the root element if `color="inherit"`. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. +| disabled | Styles applied to the root element if `disabled={true}`. +| label | Styles applied to the children container element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/IconButton/IconButton.js) diff --git a/pages/api/icon.md b/pages/api/icon.md index f0bb4c10c41183..15be9b18c37cde 100644 --- a/pages/api/icon.md +++ b/pages/api/icon.md @@ -26,13 +26,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `colorPrimary` -- `colorSecondary` -- `colorAction` -- `colorError` -- `colorDisabled` -- `fontSizeInherit` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. +| colorAction | Styles applied to the root element if `color="action"`. +| colorError | Styles applied to the root element if `color="error"`. +| colorDisabled | Styles applied to the root element if `color="disabled"`. +| fontSizeInherit | Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Icon/Icon.js) diff --git a/pages/api/input-adornment.md b/pages/api/input-adornment.md index 87f7dad711d001..0e947f8db95c86 100644 --- a/pages/api/input-adornment.md +++ b/pages/api/input-adornment.md @@ -27,9 +27,13 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `positionStart` -- `positionEnd` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| positionStart | Styles applied to the root element if `position="start"`. +| positionEnd | Styles applied to the root element if `position="end"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/InputAdornment/InputAdornment.js) diff --git a/pages/api/input-label.md b/pages/api/input-label.md index d699a019b0911b..8f21612d1a086b 100644 --- a/pages/api/input-label.md +++ b/pages/api/input-label.md @@ -32,11 +32,15 @@ Any other properties supplied will be spread to the root element ([FormLabel](/a You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `formControl` -- `marginDense` -- `shrink` -- `animated` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| formControl | Styles applied to the root element if the component is a descendant of `FormControl`. +| marginDense | Styles applied to the root element if `margin="dense"`. +| shrink | Styles applied to the `input` element if `shrink={true}`. +| animated | Styles applied to the `input` element if `disableAnimation={false}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/InputLabel/InputLabel.js) diff --git a/pages/api/input.md b/pages/api/input.md index f11748a0147ee4..9f9463d3aca986 100644 --- a/pages/api/input.md +++ b/pages/api/input.md @@ -46,19 +46,23 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `formControl` -- `focused` -- `disabled` -- `underline` -- `error` -- `multiline` -- `fullWidth` -- `input` -- `inputMarginDense` -- `inputMultiline` -- `inputType` -- `inputTypeSearch` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| formControl | Styles applied to the root element if the component is a descendant of `FormControl`. +| focused | Styles applied to the root element if the component is focused. +| disabled | Styles applied to the root element if `disabled={true}`. +| underline | Styles applied to the root element if `disabledUnderline={false}`. +| error | Styles applied to the root element if `error={true}`. +| multiline | Styles applied to the root element if `multiline={true}`. +| fullWidth | Styles applied to the root element if `fullWidth={true}`. +| input | Styles applied to the `input` element. +| inputMarginDense | Styles applied to the `input` element if `margin="dense"`. +| inputMultiline | Styles applied to the `input` element if `multiline={true}`. +| inputType | Styles applied to the `input` element if `type` is not "text"`. +| inputTypeSearch | Styles applied to the `input` element if `type="search"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Input/Input.js) diff --git a/pages/api/linear-progress.md b/pages/api/linear-progress.md index f982f4d12c7a63..c6ecf59973d923 100644 --- a/pages/api/linear-progress.md +++ b/pages/api/linear-progress.md @@ -31,22 +31,27 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `colorPrimary` -- `colorSecondary` -- `buffer` -- `query` -- `dashed` -- `dashedColorPrimary` -- `dashedColorSecondary` -- `bar` -- `barColorPrimary` -- `barColorSecondary` -- `bar1Indeterminate` -- `bar2Indeterminate` -- `bar1Determinate` -- `bar1Buffer` -- `bar2Buffer` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| colorPrimary | Styles applied to the root & bar2 element if `color="primary"`; bar2 if `variant-"buffer"`. +| colorSecondary | Styles applied to the root & bar2 elements if `color="secondary"`; bar2 if variant="buffer". +| buffer | Styles applied to the root element if `variant="buffer"`. +| query | Styles applied to the root element if `variant="query"`. +| dashed | Styles applied to the additional bar element if `variant="buffer"`. +| dashedColorPrimary | Styles applied to the additional bar element if `variant="buffer"` & `color="primary"`. +| dashedColorSecondary | Styles applied to the additional bar element if `variant="buffer"` & `color="secondary"`. +| bar | Styles applied to the layered bar1 & bar2 elements. +| barColorPrimary | Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". +| barColorSecondary | Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". +| bar1Indeterminate | Styles applied to the bar1 element if `variant="indeterminate or query"`. +| bar1Determinate | Styles applied to the bar1 element if `variant="determinate"`. +| bar1Buffer | Styles applied to the bar1 element if `variant="buffer"`. +| bar2Indeterminate | Styles applied to the bar2 element if `variant="indeterminate or query"`. +| bar2Determinate | Styles applied to the bar2 element if `variant="determinate"`. +| bar2Buffer | Styles applied to the bar2 element if `variant="buffer"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/LinearProgress/LinearProgress.js) diff --git a/pages/api/list-item-avatar.md b/pages/api/list-item-avatar.md index 293f5ca4af0054..4fa213704fea3b 100644 --- a/pages/api/list-item-avatar.md +++ b/pages/api/list-item-avatar.md @@ -9,13 +9,13 @@ title: ListItemAvatar API

The API documentation of the ListItemAvatar React component.

-It's a simple wrapper to apply the `dense` mode styles to `Avatar`. +This is a simple wrapper to apply the `dense` mode styles to `Avatar`. ## Props | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | element |   | The content of the component, normally `Avatar`. | +| children * | element |   | The content of the component – normally `Avatar`. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | Any other properties supplied will be spread to the root element (native element). @@ -24,8 +24,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `icon` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| icon | Styles applied to the children – typically the `Avatar` component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItemAvatar/ListItemAvatar.js) diff --git a/pages/api/list-item-icon.md b/pages/api/list-item-icon.md index cba977260025ab..51bc850707c62d 100644 --- a/pages/api/list-item-icon.md +++ b/pages/api/list-item-icon.md @@ -24,7 +24,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItemIcon/ListItemIcon.js) diff --git a/pages/api/list-item-secondary-action.md b/pages/api/list-item-secondary-action.md index b8fe8f04ea2285..92308d87421590 100644 --- a/pages/api/list-item-secondary-action.md +++ b/pages/api/list-item-secondary-action.md @@ -24,7 +24,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.js) diff --git a/pages/api/list-item-text.md b/pages/api/list-item-text.md index 34433800ce720f..0bb6ca69967bde 100644 --- a/pages/api/list-item-text.md +++ b/pages/api/list-item-text.md @@ -30,12 +30,16 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `inset` -- `dense` -- `primary` -- `secondary` -- `textDense` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| inset | Styles applied to the root element if `inset={true}`. +| dense | Styles applied to the root element if `context.dense` is `true`. +| primary | Styles applied to the primary `Typography` component. +| secondary | Styles applied to the secondary `Typography` component. +| textDense | Styles applied to the `Typography` components if `context.dense` is `true`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItemText/ListItemText.js) diff --git a/pages/api/list-item.md b/pages/api/list-item.md index f7d1390b794041..be883f438a0d8f 100644 --- a/pages/api/list-item.md +++ b/pages/api/list-item.md @@ -31,16 +31,20 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `container` -- `focusVisible` -- `default` -- `dense` -- `disabled` -- `divider` -- `gutters` -- `button` -- `secondaryAction` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the (normally root) `component` element. May be wrapped by a `container`. +| container | Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. +| focusVisible | Styles applied to the `component`'s `focusVisibleClassName` property if `button={true}`. +| default | Legacy styles applied to the root element. Use `root` instead. +| dense | Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`. +| disabled | Styles applied to the inner `component` element if `dense={true}`. +| divider | Styles applied to the inner `component` element if `divider={true}`. +| gutters | Styles applied to the inner `component` element if `disableGutters={false}`. +| button | Styles applied to the inner `component` element if `button={true}`. +| secondaryAction | Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListItem/ListItem.js) diff --git a/pages/api/list-subheader.md b/pages/api/list-subheader.md index 78b096d9f5ce9b..5783f38df45d05 100644 --- a/pages/api/list-subheader.md +++ b/pages/api/list-subheader.md @@ -28,11 +28,15 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `colorPrimary` -- `colorInherit` -- `inset` -- `sticky` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorInherit | Styles applied to the root element if `color="inherit"`. +| inset | Styles applied to the root element if `inset={true}`. +| sticky | Styles applied to the root element if `disableSticky={false}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ListSubheader/ListSubheader.js) diff --git a/pages/api/list.md b/pages/api/list.md index c9d9b1a8a69cb9..1c76f22b984bd8 100644 --- a/pages/api/list.md +++ b/pages/api/list.md @@ -28,10 +28,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `padding` -- `dense` -- `subheader` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| padding | Styles applied to the root element if `disablePddding={false}`. +| dense | Styles applied to the root element if `dense={true}` & `disablePddding={false}`. +| subheader | Styles applied to the root element if a `subheader` is provided. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/List/List.js) diff --git a/pages/api/menu-item.md b/pages/api/menu-item.md index e0a84b6e842cf7..fd511824ed3fc9 100644 --- a/pages/api/menu-item.md +++ b/pages/api/menu-item.md @@ -26,8 +26,12 @@ Any other properties supplied will be spread to the root element ([ListItem](/ap You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `selected` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| selected | Styles applied to the root element if `selected={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/MenuItem/MenuItem.js) diff --git a/pages/api/menu.md b/pages/api/menu.md index 3e6f357be34528..ec799e64a74b35 100644 --- a/pages/api/menu.md +++ b/pages/api/menu.md @@ -37,7 +37,11 @@ Any other properties supplied will be spread to the root element ([Popover](/api You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `paper` + + +| Name | Description | +|:-----|:------------| +| paper | Styles applied to the `Paper` component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Menu/Menu.js) diff --git a/pages/api/mobile-stepper.md b/pages/api/mobile-stepper.md index 7b0ded75d3ee07..b079aaba6d5eca 100644 --- a/pages/api/mobile-stepper.md +++ b/pages/api/mobile-stepper.md @@ -29,14 +29,18 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `positionBottom` -- `positionTop` -- `positionStatic` -- `dots` -- `dot` -- `dotActive` -- `progress` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| positionBottom | Styles applied to the root element if `position="bottom"`. +| positionTop | Styles applied to the root element if `position="top"`. +| positionStatic | Styles applied to the root element if `position="static"`. +| dots | Styles applied to the dots container if `variant="dots"`. +| dot | Styles applied to each dot if `variant="dots"`. +| dotActive | Styles applied to a dot if `variant="dots"` and this is the active step. +| progress | Styles applied to the Linear Progress component if `variant="progress"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/MobileStepper/MobileStepper.js) diff --git a/pages/api/modal.md b/pages/api/modal.md index bcf6e26ffc7da0..c412ebbea14881 100644 --- a/pages/api/modal.md +++ b/pages/api/modal.md @@ -41,8 +41,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `hidden` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| hidden | Styles applied to the root element if the `Modal` has exited. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Modal/Modal.js) diff --git a/pages/api/native-select.md b/pages/api/native-select.md index 3e56b9638c219b..be32248196e649 100644 --- a/pages/api/native-select.md +++ b/pages/api/native-select.md @@ -29,11 +29,15 @@ Any other properties supplied will be spread to the root element ([Input](/api/i You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `select` -- `selectMenu` -- `disabled` -- `icon` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the `Input` component `root` class. +| select | Styles applied to the `Input` component `select` class. +| selectMenu | Styles applied to the `Input` component `selectMenu` class. +| disabled | Styles applied to the `Input` component `disabled` class. +| icon | Styles applied to the `Input` component `icon` class. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/NativeSelect/NativeSelect.js) diff --git a/pages/api/paper.md b/pages/api/paper.md index 8083bf579e32a8..b25d72e4a7625b 100644 --- a/pages/api/paper.md +++ b/pages/api/paper.md @@ -27,33 +27,37 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `rounded` -- `elevation0` -- `elevation1` -- `elevation2` -- `elevation3` -- `elevation4` -- `elevation5` -- `elevation6` -- `elevation7` -- `elevation8` -- `elevation9` -- `elevation10` -- `elevation11` -- `elevation12` -- `elevation13` -- `elevation14` -- `elevation15` -- `elevation16` -- `elevation17` -- `elevation18` -- `elevation19` -- `elevation20` -- `elevation21` -- `elevation22` -- `elevation23` -- `elevation24` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| rounded | Styles applied to the root element if `square={false}`. +| elevation0 | +| elevation1 | +| elevation2 | +| elevation3 | +| elevation4 | +| elevation5 | +| elevation6 | +| elevation7 | +| elevation8 | +| elevation9 | +| elevation10 | +| elevation11 | +| elevation12 | +| elevation13 | +| elevation14 | +| elevation15 | +| elevation16 | +| elevation17 | +| elevation18 | +| elevation19 | +| elevation20 | +| elevation21 | +| elevation22 | +| elevation23 | +| elevation24 | Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Paper/Paper.js) diff --git a/pages/api/popover.md b/pages/api/popover.md index af0815d1b61bba..5c52886d0266d8 100644 --- a/pages/api/popover.md +++ b/pages/api/popover.md @@ -46,7 +46,11 @@ Any other properties supplied will be spread to the root element ([Modal](/api/m You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `paper` + + +| Name | Description | +|:-----|:------------| +| paper | Styles applied to the `Paper` component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Popover/Popover.js) diff --git a/pages/api/radio.md b/pages/api/radio.md index 9bc52c6f8ccafc..659498b0c8bdff 100644 --- a/pages/api/radio.md +++ b/pages/api/radio.md @@ -35,11 +35,15 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `checked` -- `disabled` -- `colorPrimary` -- `colorSecondary` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| checked | Styles applied to the root element if `checked={true}`. +| disabled | Styles applied to the root element if `disabled={true}`. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Radio/Radio.js) diff --git a/pages/api/select.md b/pages/api/select.md index 519a33022499d3..931d39bf9148b1 100644 --- a/pages/api/select.md +++ b/pages/api/select.md @@ -39,11 +39,15 @@ Any other properties supplied will be spread to the root element ([Input](/api/i You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `select` -- `selectMenu` -- `disabled` -- `icon` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the `Input` component `root` class. +| select | Styles applied to the `Input` component `select` class. +| selectMenu | Styles applied to the `Input` component `selectMenu` class. +| disabled | Styles applied to the `Input` component `disabled` class. +| icon | Styles applied to the `Input` component `icon` class. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Select/Select.js) diff --git a/pages/api/snackbar-content.md b/pages/api/snackbar-content.md index 98fb896f7a3484..d8f5fad6cdb149 100644 --- a/pages/api/snackbar-content.md +++ b/pages/api/snackbar-content.md @@ -25,9 +25,13 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `message` -- `action` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| message | Styles applied to the message wrapper element. +| action | Styles applied to the action wrapper element if `action` is provided. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/SnackbarContent/SnackbarContent.js) diff --git a/pages/api/snackbar.md b/pages/api/snackbar.md index da7e8718e95ce2..2b53e186b5cb6f 100644 --- a/pages/api/snackbar.md +++ b/pages/api/snackbar.md @@ -43,13 +43,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `anchorOriginTopCenter` -- `anchorOriginBottomCenter` -- `anchorOriginTopRight` -- `anchorOriginBottomRight` -- `anchorOriginTopLeft` -- `anchorOriginBottomLeft` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| anchorOriginTopCenter | Styles applied to the root element if `anchorOrigin={{ 'top', 'center' }}`. +| anchorOriginBottomCenter | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'center' }}`. +| anchorOriginTopRight | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }}`. +| anchorOriginBottomRight | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }}`. +| anchorOriginTopLeft | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }}`. +| anchorOriginBottomLeft | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Snackbar/Snackbar.js) diff --git a/pages/api/step-button.md b/pages/api/step-button.md index 13ba1521149560..6de50cc189be5c 100644 --- a/pages/api/step-button.md +++ b/pages/api/step-button.md @@ -26,9 +26,14 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `vertical` -- `touchRipple` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horizontal"`. +| vertical | Styles applied to the root element if `orientation="vertical"`. +| touchRipple | Styles applied to the `ButtonBase` touch-ripple. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepButton/StepButton.js) diff --git a/pages/api/step-connector.md b/pages/api/step-connector.md index 09d496e45eebc5..63058214d6d1e0 100644 --- a/pages/api/step-connector.md +++ b/pages/api/step-connector.md @@ -23,13 +23,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `horizontal` -- `vertical` -- `alternativeLabel` -- `line` -- `lineHorizontal` -- `lineVertical` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horizontal"`. +| vertical | Styles applied to the root element if `orientation="vertical"`. +| alternativeLabel | Styles applied to the root element if `alternativeLabel={true}`. +| line | Styles applied to the line element. +| lineHorizontal | Styles applied to the root element if `orientation="horizontal"`. +| lineVertical | Styles applied to the root element if `orientation="vertical"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepConnector/StepConnector.js) diff --git a/pages/api/step-content.md b/pages/api/step-content.md index 231d8eb4a6aad4..675014e855f67b 100644 --- a/pages/api/step-content.md +++ b/pages/api/step-content.md @@ -27,9 +27,13 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `last` -- `transition` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| last | Styles applied to the root element if `last={true}` (controlled by `Step`). +| transition | Styles applied to the Transition component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepContent/StepContent.js) diff --git a/pages/api/step-icon.md b/pages/api/step-icon.md index 72d46ccceee230..742a7d69817837 100644 --- a/pages/api/step-icon.md +++ b/pages/api/step-icon.md @@ -27,11 +27,15 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `text` -- `active` -- `completed` -- `error` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| text | Styles applied to the SVG text element. +| active | Styles applied to the root element if `active={true}`. +| completed | Styles applied to the root element if `completed={true}`. +| error | Styles applied to the root element if `error={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepIcon/StepIcon.js) diff --git a/pages/api/step-label.md b/pages/api/step-label.md index 4930f40f6c6a3a..0322a4c37ecb72 100644 --- a/pages/api/step-label.md +++ b/pages/api/step-label.md @@ -29,17 +29,21 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `horizontal` -- `vertical` -- `active` -- `completed` -- `alternativeLabel` -- `error` -- `disabled` -- `label` -- `iconContainer` -- `labelContainer` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horiizontal". +| vertical | Styles applied to the root element if `orientation="vertical". +| label | Styles applied to the `Typography` component which wraps `children`. +| active | Styles applied to the `Typography` component if `active={true}`. +| completed | Styles applied to the `Typography` component if `completed={true}`. +| error | Styles applied to the root element and `Typography` component if `error={true}`. +| disabled | Styles applied to the root element and `Typography` component if `disabled={true}`. +| iconContainer | Styles applied to the `icon` container element. +| alternativeLabel | Styles applied to the root & icon container and `Typography` if `alternativeLabel={true}`. +| labelContainer | Styles applied to the container element which wraps `Typography` and `optional`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/StepLabel/StepLabel.js) diff --git a/pages/api/step.md b/pages/api/step.md index c1fa3237a7d106..1efa061c7a31fb 100644 --- a/pages/api/step.md +++ b/pages/api/step.md @@ -27,10 +27,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `horizontal` -- `vertical` -- `alternativeLabel` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horizontal"`. +| vertical | Styles applied to the root element if `orientation="vertical"`. +| alternativeLabel | Styles applied to the root element if `alternativeLabel={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Step/Step.js) diff --git a/pages/api/stepper.md b/pages/api/stepper.md index 1e4d83ae283342..5c18bef6b7f7dd 100644 --- a/pages/api/stepper.md +++ b/pages/api/stepper.md @@ -29,10 +29,14 @@ Any other properties supplied will be spread to the root element ([Paper](/api/p You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `horizontal` -- `vertical` -- `alternativeLabel` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| horizontal | Styles applied to the root element if `orientation="horizontal"`. +| vertical | Styles applied to the root element if `orientation="vertical"`. +| alternativeLabel | Styles applied to the root element if `alternativeLabel={true}`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Stepper/Stepper.js) diff --git a/pages/api/svg-icon.md b/pages/api/svg-icon.md index 20aa7cb175436a..d40edf4f314ba6 100644 --- a/pages/api/svg-icon.md +++ b/pages/api/svg-icon.md @@ -30,13 +30,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `colorPrimary` -- `colorSecondary` -- `colorAction` -- `colorError` -- `colorDisabled` -- `fontSizeInherit` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. +| colorAction | Styles applied to the root element if `color="saction"`. +| colorError | Styles applied to the root element if `color="error"`. +| colorDisabled | Styles applied to the root element if `color="disabled"`. +| fontSizeInherit | Styles applied to the root element if `fontSize="inherit"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/SvgIcon/SvgIcon.js) diff --git a/pages/api/switch-base.js b/pages/api/switch-base.js deleted file mode 100644 index 11d0351117dc1a..00000000000000 --- a/pages/api/switch-base.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import withRoot from 'docs/src/modules/components/withRoot'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import markdown from './switch-base.md'; - -function Page() { - return ; -} - -export default withRoot(Page); diff --git a/pages/api/switch-base.md b/pages/api/switch-base.md deleted file mode 100644 index d5c9843254eacd..00000000000000 --- a/pages/api/switch-base.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -filename: /packages/material-ui/src/internal/SwitchBase.js -title: SwitchBase API ---- - - - -# SwitchBase - -

The API documentation of the SwitchBase React component.

- - - -## Props - -| Name | Type | Default | Description | -|:-----|:-----|:--------|:------------| -| checked | union: bool |
 string
|   | If `true`, the component is checked. | -| checkedIcon * | node |   | The icon to display when the component is checked. | -| classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | -| disabled | bool |   | If `true`, the switch will be disabled. | -| disableRipple | bool |   | If `true`, the ripple effect will be disabled. | -| icon * | node |   | The icon to display when the component is unchecked. | -| id | string |   | The id of the `input` element. | -| indeterminate | bool |   | If `true`, the component appears indeterminate. | -| indeterminateIcon | node |   | The icon to display when the component is indeterminate. | -| inputProps | object |   | Attributes applied to the `input` element. | -| inputRef | union: func |
 object
|   | Use that property to pass a ref callback to the native input component. | -| name | string |   | | -| onChange | func |   | Callback fired when the state is changed.

**Signature:**
`function(event: object, checked: boolean) => void`
*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.
*checked:* The `checked` value of the switch | -| type | string | 'checkbox' | The input component property `type`. | -| value | string |   | The value of the component. | - -Any other properties supplied will be spread to the root element ([IconButton](/api/icon-button)). - -## CSS API - -You can override all the class names injected by Material-UI thanks to the `classes` property. -This property accepts the following keys: -- `root` -- `checked` -- `disabled` -- `input` - -Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section -and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/internal/SwitchBase.js) -for more detail. - -If using the `overrides` key of the theme as documented -[here](/customization/themes#customizing-all-instances-of-a-component-type), -you need to use the following style sheet name: `MuiSwitchBase`. - -## Inheritance - -The properties of the [IconButton](/api/icon-button) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api#spread). - diff --git a/pages/api/switch.md b/pages/api/switch.md index 216d8a3be5c0c7..9ec6512b5f51e3 100644 --- a/pages/api/switch.md +++ b/pages/api/switch.md @@ -35,15 +35,19 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `icon` -- `iconChecked` -- `switchBase` -- `checked` -- `colorPrimary` -- `colorSecondary` -- `disabled` -- `bar` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| icon | Styles used to create the `icon` passed to the internal `SwitchBase` component `icon` prop. +| iconChecked | Styles applied the icon element component if `checked={true}`. +| switchBase | Styles applied to the internal `SwitchBase` component's `root` class. +| checked | Styles applied to the internal `SwitchBase` component's `checked` class. +| colorPrimary | Styles applied to the internal SwitchBase component's root element if `color="primary"`. +| colorSecondary | Styles applied to the internal SwitchBase component's root element if `color="secondary"`. +| disabled | Styles applied to the internal SwitchBase component's disabled class. +| bar | Styles applied to the bar element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Switch/Switch.js) diff --git a/pages/api/tab.md b/pages/api/tab.md index 2f22b629c398f3..fe00d9b2d950aa 100644 --- a/pages/api/tab.md +++ b/pages/api/tab.md @@ -28,18 +28,22 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `labelIcon` -- `textColorInherit` -- `textColorPrimary` -- `textColorSecondary` -- `selected` -- `disabled` -- `fullWidth` -- `wrapper` -- `labelContainer` -- `label` -- `labelWrapped` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| labelIcon | Styles applied to the root element if both `icon` and `label` are provided. +| textColorInherit | Styles applied to the root element if `textColor="inherit"`. +| textColorPrimary | Styles applied to the root element if `textColor="primary"`. +| textColorSecondary | Styles applied to the root element if `textColor="secondary"`. +| selected | Styles applied to the root element if `selected={true}` (controlled by the Tabs component). +| disabled | Styles applied to the root element if `disabled={true}` (controlled by the Tabs component). +| fullWidth | Styles applied to the root element if `fullWidth={true}` (controlled by the Tabs component). +| wrapper | Styles applied to the `icon` and `label`'s wrapper element. +| labelContainer | Styles applied to the label container element if `label` is provided. +| label | Styles applied to the label wrapper element if `label` is provided. +| labelWrapped | Styles applied to the label wrapper element if `label` is provided and the text is wrapped. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Tab/Tab.js) diff --git a/pages/api/table-body.md b/pages/api/table-body.md index 5dfdbcabb0e845..95792e084e258a 100644 --- a/pages/api/table-body.md +++ b/pages/api/table-body.md @@ -25,7 +25,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableBody/TableBody.js) diff --git a/pages/api/table-cell.md b/pages/api/table-cell.md index 5cb190cdcc6e14..36e7a6a811d36f 100644 --- a/pages/api/table-cell.md +++ b/pages/api/table-cell.md @@ -30,14 +30,18 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `head` -- `body` -- `footer` -- `numeric` -- `paddingDense` -- `paddingCheckbox` -- `paddingNone` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| head | Styles applied to the root element if `variant="head"` or `context.table.head`. +| body | Styles applied to the root element if `variant="body"` or `context.table.body`. +| footer | Styles applied to the root element if `variant="footer"` or `context.table.footer`. +| numeric | Styles applied to the root element if `numeric={true}`. +| paddingDense | Styles applied to the root element if `padding="dense"`. +| paddingCheckbox | Styles applied to the root element if `padding="checkbox"`. +| paddingNone | Styles applied to the root element if `padding="none"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableCell/TableCell.js) diff --git a/pages/api/table-footer.md b/pages/api/table-footer.md index 13902d1c4a9b7d..4508f96a9c83f9 100644 --- a/pages/api/table-footer.md +++ b/pages/api/table-footer.md @@ -25,7 +25,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableFooter/TableFooter.js) diff --git a/pages/api/table-head.md b/pages/api/table-head.md index 0e81db8eb0d86b..82bb4f2b6b530c 100644 --- a/pages/api/table-head.md +++ b/pages/api/table-head.md @@ -25,7 +25,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableHead/TableHead.js) diff --git a/pages/api/table-pagination.md b/pages/api/table-pagination.md index dce7b8a04d3b9f..2fad563ddfd13c 100644 --- a/pages/api/table-pagination.md +++ b/pages/api/table-pagination.md @@ -36,16 +36,20 @@ Any other properties supplied will be spread to the root element ([TableCell](/a You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `toolbar` -- `spacer` -- `menuItem` -- `caption` -- `input` -- `selectRoot` -- `select` -- `selectIcon` -- `actions` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| toolbar | Styles applied to the Toolbar component. +| spacer | Styles applied to the spacer element. +| caption | Styles applied to the caption Typography components if `variant="caption"`. +| selectRoot | Styles applied to the Select component `root` class. +| select | Styles applied to the Select component `select` class. +| selectIcon | Styles applied to the Select component `icon` class. +| input | Styles applied to the Input component. +| menuItem | Styles applied to the MenuItem component. +| actions | Styles applied to the internal `TablePaginationActions` component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TablePagination/TablePagination.js) diff --git a/pages/api/table-row.md b/pages/api/table-row.md index abdea1bdab4d8c..5d885eddc88ab7 100644 --- a/pages/api/table-row.md +++ b/pages/api/table-row.md @@ -28,11 +28,15 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `selected` -- `hover` -- `head` -- `footer` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| selected | Styles applied to the root element if `context.table` & `selected={true}`. +| hover | Styles applied to the root element if `context.table` & `hover={true}`. +| head | Styles applied to the root element if `context.table.head`. +| footer | Styles applied to the root element if `context.table.footer`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableRow/TableRow.js) diff --git a/pages/api/table-sort-label.md b/pages/api/table-sort-label.md index a338a281171695..c5dc4152e41885 100644 --- a/pages/api/table-sort-label.md +++ b/pages/api/table-sort-label.md @@ -26,11 +26,15 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `active` -- `icon` -- `iconDirectionDesc` -- `iconDirectionAsc` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| active | Styles applied to the root element if `active={true}`. +| icon | Styles applied to the icon component. +| iconDirectionDesc | Styles applied to the icon component if `direction="desc"`. +| iconDirectionAsc | Styles applied to the icon component if `direction="asc"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/TableSortLabel/TableSortLabel.js) diff --git a/pages/api/table.md b/pages/api/table.md index 77d43783f4b1f1..46952565011e5a 100644 --- a/pages/api/table.md +++ b/pages/api/table.md @@ -25,7 +25,11 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Table/Table.js) diff --git a/pages/api/tabs.md b/pages/api/tabs.md index ed27d24c0d4ecd..67ec740edda641 100644 --- a/pages/api/tabs.md +++ b/pages/api/tabs.md @@ -36,15 +36,19 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `flexContainer` -- `scroller` -- `fixed` -- `scrollable` -- `centered` -- `scrollButtons` -- `scrollButtonsAuto` -- `indicator` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| flexContainer | Styles applied to the flex container element. +| centered | Styles applied to the flex container element if `centered={true}` & `scrollable={false}`. +| scroller | Styles applied to the tablist element. +| fixed | Styles applied to the tablist element if `scrollable={false}`. +| scrollable | Styles applied to the tablist element if `scrollable={true}`. +| scrollButtons | Styles applied to the `ScrollButtonComponent` component. +| scrollButtonsAuto | Styles applied to the `ScrollButtonComponent` component if `sscrollButtons="auto"`. +| indicator | Styles applied to the `TabIndicator` component. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Tabs/Tabs.js) diff --git a/pages/api/toolbar.md b/pages/api/toolbar.md index b4719bc21ec0a6..8971c710807e6e 100644 --- a/pages/api/toolbar.md +++ b/pages/api/toolbar.md @@ -26,10 +26,14 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `gutters` -- `regular` -- `dense` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| gutters | Styles applied to the root element if `disableGutters={false}`. +| regular | Styles applied to the root element if `variant="regular"`. +| dense | Styles applied to the root element if `variant="dense"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Toolbar/Toolbar.js) diff --git a/pages/api/tooltip.md b/pages/api/tooltip.md index ed60aed19d3f00..01c8edcf133eec 100644 --- a/pages/api/tooltip.md +++ b/pages/api/tooltip.md @@ -40,13 +40,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `popper` -- `tooltip` -- `touch` -- `tooltipPlacementLeft` -- `tooltipPlacementRight` -- `tooltipPlacementTop` -- `tooltipPlacementBottom` + + +| Name | Description | +|:-----|:------------| +| popper | Styles applied to the Popper component. +| tooltip | Styles applied to the tooltip (label wrapper) element. +| touch | Styles applied to the tooltip (label wrapper) element if the tooltip is opened by touch. +| tooltipPlacementLeft | Styles applied to the tooltip (label wrapper) element if `placement` contains "left". +| tooltipPlacementRight | Styles applied to the tooltip (label wrapper) element if `placement` contains "right". +| tooltipPlacementTop | Styles applied to the tooltip (label wrapper) element if `placement` contains "top". +| tooltipPlacementBottom | Styles applied to the tooltip (label wrapper) element if `placement` contains "bottom". Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Tooltip/Tooltip.js) diff --git a/pages/api/touch-ripple.md b/pages/api/touch-ripple.md index a1ae70ef761972..1a8c27c76018c5 100644 --- a/pages/api/touch-ripple.md +++ b/pages/api/touch-ripple.md @@ -24,13 +24,17 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `ripple` -- `rippleVisible` -- `ripplePulsate` -- `child` -- `childLeaving` -- `childPulsate` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| ripple | Styles applied to the internal `Ripple` components `ripple` class. +| rippleVisible | Styles applied to the internal `Ripple` components `rippleVisible` class. +| ripplePulsate | Styles applied to the internal `Ripple` components `ripplePulsate` class. +| child | Styles applied to the internal `Ripple` components `child` class. +| childLeaving | Styles applied to the internal `Ripple` components `childLeaving` class. +| childPulsate | Styles applied to the internal `Ripple` components `childPulsate` class. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/ButtonBase/TouchRipple.js) diff --git a/pages/api/typography.md b/pages/api/typography.md index 74b44e5848839c..f5a4f374aab03c 100644 --- a/pages/api/typography.md +++ b/pages/api/typography.md @@ -32,30 +32,34 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `display4` -- `display3` -- `display2` -- `display1` -- `headline` -- `title` -- `subheading` -- `body2` -- `body1` -- `caption` -- `button` -- `alignLeft` -- `alignCenter` -- `alignRight` -- `alignJustify` -- `noWrap` -- `gutterBottom` -- `paragraph` -- `colorInherit` -- `colorPrimary` -- `colorSecondary` -- `colorTextSecondary` -- `colorError` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| display4 | Styles applied to the root element if `variant="display4"`. +| display3 | Styles applied to the root element if `variant="display3"`. +| display2 | Styles applied to the root element if `variant="display2"`. +| display1 | Styles applied to the root element if `variant="display1"`. +| headline | Styles applied to the root element if `variant="headline"`. +| title | Styles applied to the root element if `variant="title"`. +| subheading | Styles applied to the root element if `variant="subheading"`. +| body2 | Styles applied to the root element if `variant="body2"`. +| body1 | Styles applied to the root element if `variant="body1"`. +| caption | Styles applied to the root element if `variant="caption"`. +| button | Styles applied to the root element if `variant="button"`. +| alignLeft | Styles applied to the root element if `align="left"`. +| alignCenter | Styles applied to the root element if `align="center"`. +| alignRight | Styles applied to the root element if `align="right"`. +| alignJustify | Styles applied to the root element if `align="justify"`. +| noWrap | Styles applied to the root element if `align="nowrap"`. +| gutterBottom | Styles applied to the root element if `gutterBottom={true}`. +| paragraph | Styles applied to the root element if `paragraph={true}`. +| colorInherit | Styles applied to the root element if `color="inherit"`. +| colorPrimary | Styles applied to the root element if `color="primary"`. +| colorSecondary | Styles applied to the root element if `color="secondary"`. +| colorTextSecondary | Styles applied to the root element if `color="textSecondary"`. +| colorError | Styles applied to the root element if `color="error"`. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Typography/Typography.js) diff --git a/pages/lab/api/slider.md b/pages/lab/api/slider.md index cfae780cd36636..e9398b6ecc6ffa 100644 --- a/pages/lab/api/slider.md +++ b/pages/lab/api/slider.md @@ -30,6 +30,36 @@ title: Slider API Any other properties supplied will be spread to the root element (native element). +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| container | Styles applied to the container element. +| track | Styles applied to the track elements. +| trackBefore | Styles applied to the track element before the thumb. +| trackAfter | Styles applied to the track element after the thumb. +| thumb | Styles applied to the thumb element. +| reverse | Class applied to the root element to trigger JSS nested styles if `reverse={true}` . +| disabled | Class applied to the track and thumb elements to trigger JSS nested styles if `disabled`. +| jumped | Class applied to the track and thumb elements to trigger JSS nested styles if `jumped`. +| focused | Class applied to the track and thumb elements to trigger JSS nested styles if `focused`. +| activated | Class applied to the track and thumb elements to trigger JSS nested styles if `activated`. +| vertical | Class applied to the root, track and container to trigger JSS nested styles if `vertical`. +| zero | Class applied to the thumb to trigger nested styles if `value` = `min` . + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/Slider/Slider.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiSlider`. + ## Demos - [Slider](/lab/slider) diff --git a/pages/lab/api/speed-dial-action.md b/pages/lab/api/speed-dial-action.md index 238777531425a9..d620ace6b7c1e5 100644 --- a/pages/lab/api/speed-dial-action.md +++ b/pages/lab/api/speed-dial-action.md @@ -23,6 +23,26 @@ title: SpeedDialAction API Any other properties supplied will be spread to the root element (native element). +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root (`Tooltip`) component. +| button | Styles applied to the `Button` component. +| buttonClosed | Styles applied to the `Button` component if `open={false}`. + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiSpeedDialAction`. + ## Demos - [Speed Dial](/lab/speed-dial) diff --git a/pages/lab/api/speed-dial-icon.md b/pages/lab/api/speed-dial-icon.md index 7316932a2e37d0..7212e48dc79bef 100644 --- a/pages/lab/api/speed-dial-icon.md +++ b/pages/lab/api/speed-dial-icon.md @@ -21,6 +21,29 @@ title: SpeedDialIcon API Any other properties supplied will be spread to the root element (native element). +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| icon | Styles applied to the icon component. +| iconOpen | Styles applied to the icon component if `open={true}`. +| iconWithOpenIconOpen | Styles applied to the icon when and `openIcon` is provided & if `open={true}`. +| openIcon | Styles applied to the `openIcon` if provided. +| openIconOpen | Styles applied to the `openIcon` if provided & if `open={true}` + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiSpeedDialIcon`. + ## Demos - [Speed Dial](/lab/speed-dial) diff --git a/pages/lab/api/speed-dial.md b/pages/lab/api/speed-dial.md index 14f2da121b82c9..84129e6a88572c 100644 --- a/pages/lab/api/speed-dial.md +++ b/pages/lab/api/speed-dial.md @@ -30,6 +30,26 @@ title: SpeedDial API Any other properties supplied will be spread to the root element (native element). +## CSS API + +You can override all the class names injected by Material-UI thanks to the `classes` property. +This property accepts the following keys: + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| actions | Styles applied to the actions (`children` wrapper) element. +| actionsClosed | Styles applied to the actions (`children` wrapper) element if `open={false}`. + +Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section +and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/SpeedDial/SpeedDial.js) +for more detail. + +If using the `overrides` key of the theme as documented +[here](/customization/themes#customizing-all-instances-of-a-component-type), +you need to use the following style sheet name: `MuiSpeedDial`. + ## Demos - [Speed Dial](/lab/speed-dial) diff --git a/pages/lab/api/toggle-button-group.md b/pages/lab/api/toggle-button-group.md index b68355d2134920..9b16a534eb2d19 100644 --- a/pages/lab/api/toggle-button-group.md +++ b/pages/lab/api/toggle-button-group.md @@ -28,8 +28,12 @@ Any other properties supplied will be spread to the root element (native element You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `selected` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| selected | Styles applied to the root element if `selected={true}` or `selected="auto" and `value` set. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/ToggleButton/ToggleButtonGroup.js) diff --git a/pages/lab/api/toggle-button.md b/pages/lab/api/toggle-button.md index 8ab6917600947e..0408fb17dc6f70 100644 --- a/pages/lab/api/toggle-button.md +++ b/pages/lab/api/toggle-button.md @@ -29,10 +29,14 @@ Any other properties supplied will be spread to the root element ([ButtonBase](/ You can override all the class names injected by Material-UI thanks to the `classes` property. This property accepts the following keys: -- `root` -- `label` -- `disabled` -- `selected` + + +| Name | Description | +|:-----|:------------| +| root | Styles applied to the root element. +| disabled | Styles applied to the root element if `disabled={true}`. +| selected | Styles applied to the root element if `selected={true}`. +| label | Styles applied to the `label` wrapper element. Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab/src/ToggleButton/ToggleButton.js)