JustLogin JustLogin - 1 month ago 27
React JSX Question

Cannot create custom style with React and Bootstrap

I'm using

react-bootstrap
NPM package to make my
React
components look properly. I need to customize some of them, so I'm following the official React-Bootstrap documentation, but the code throws the error
index.jsx:5 Uncaught TypeError: Cannot read property 'addStyle' of undefined
.

This is my custom
Button
component code:

import React from "react";
import Button from 'react-bootstrap/lib/Button';
import bootstrapUtils from 'react-bootstrap/lib/utils/bootstrapUtils';

bootstrapUtils.addStyle(Button, 'custom');

export default class MediaItemButton extends React.Component {
render() {

return (
<div>
<style type="text/css">{`
.btn-custom {
background-color: purple;
color: white;
}
`}</style>
<Button bsStyle="primary">Custom</Button>
</div>
);
}
}

Answer

Change to this:

import { bootstrapUtils } from 'react-bootstrap/lib/utils';