Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Material-UI Definition List. https://codesandbox.io/s/y2mjwnwj49
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 }) => (
<TableRow>
<TableCell component="th" scope="row" className={classes.term}>
{term}
</TableCell>
<TableCell className={classes.description}>{children}</TableCell>
</TableRow>
)
export default withStyles<ClassKey>(theme => ({
term: {
backgroundColor: theme.palette.background.default,
whiteSpace: 'nowrap',
wordBreak: 'keep-all'
},
description: {
width: '100%'
}
}))(DefinitionItem)
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 }) => (
<Table>
<TableBody className={classes.root}>{children}</TableBody>
</Table>
)
export default withStyles<ClassKey>(theme => ({
root: {
'& tr:first-child': {
borderTopColor: theme.palette.divider,
borderTopStyle: 'solid',
borderTopWidth: '1px'
}
}
}))(DefinitionList)
import * as React from "react";
import DefinitionList from "./DefinitionList";
import DefinitionItem from "./DefinitionItem";
const Usage = () => (
<DefinitionList>
<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>
</DefinitionList>
);
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.