Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Material-UI Definition List.
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'
import TableCell from '@material-ui/core/TableCell'
import TableRow from '@material-ui/core/TableRow'
import * as React from 'react'
interface Props {
term: string
type ClassKey = 'term' | 'description'
const DefinitionItem: React.SFC<Props & WithStyles<ClassKey>> = ({ term, classes, children }) => (
<TableCell component="th" scope="row" className={classes.term}>
<TableCell className={classes.description}>{children}</TableCell>
export default withStyles<ClassKey>(theme => ({
term: {
backgroundColor: theme.palette.background.default,
whiteSpace: 'nowrap',
wordBreak: 'keep-all'
description: {
width: '100%'
import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles'
import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import * as React from 'react'
type ClassKey = 'root'
const DefinitionList: React.SFC<WithStyles<ClassKey>> = ({ children, classes }) => (
<TableBody className={classes.root}>{children}</TableBody>
export default withStyles<ClassKey>(theme => ({
root: {
'& tr:first-child': {
borderTopColor: theme.palette.divider,
borderTopStyle: 'solid',
borderTopWidth: '1px'
import * as React from "react";
import DefinitionList from "./DefinitionList";
import DefinitionItem from "./DefinitionItem";
const Usage = () => (
<DefinitionItem term="SGML">The Standard Generalized Markup Language</DefinitionItem>
<DefinitionItem term="HTML">The Hypertext Markup Language</DefinitionItem>
<DefinitionItem term="XML">The Extensible Markup Language</DefinitionItem>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.