If you prefer the Material UI api but also like Bootstrap's clean buttons and useful color variants then this package is here for you. It wraps material-ui's <Button> and <Card> and <Typography> components and adds a new component <Alert>. Inspired by https://react-bootstrap.github.io .
DEMO HERE
npm i material-ui-bootstrap
Drop this in place of the material-ui Button. You may use the following color props: primary, secondary, success, danger, warning, info, light, dark.
import React from " react "
import { Button } from " material-ui-bootstrap "
export default function App ( ) {
return (
< Button color = " success " variant = " contained " >
Success
</ Button >
)
}
import React from " react "
import { Alert } from " material-ui-bootstrap "
export default function App ( ) {
return (
< Alert color = " danger " >
< Alert.Heading > Heading </ Alert.Heading >
Alert danger
</ Alert >
)
}
import React from " react "
import { Typography } from " material-ui-bootstrap "
export default function TypographyExample ( ) {
return < Typography color = " success " > Example </ Typography >
}
import React from " react "
import Card , { CardContent , CardHeader , CardTitle } from " material-ui-bootstrap "
export default function CardExample ( ) {
return (
< Card color = " success " >
< CardHeader > CardHeader </ CardHeader >
< CardContent >
< CardTitle > Title </ CardTitle >
Example card content.
</ CardContent >
</ Card >
)
}
