material-ui-bootstrap
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.
Install
# npm
npm i material-ui-bootstrap
Button
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>
)
}
Alert
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>
)
}
Typography
import React from "react"
import { Typography } from "material-ui-bootstrap"
export default function TypographyExample() {
return <Typography color="success">Example</Typography>
}
Card
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>
)
}