I'm using react-bootstrap
NPM package to make my React
ponents 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
ponent 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>
);
}
}
I'm using react-bootstrap
NPM package to make my React
ponents 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
ponent 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>
);
}
}
Share
Improve this question
asked Oct 28, 2016 at 11:33
JustLoginJustLogin
1,8865 gold badges30 silver badges50 bronze badges
2
- your bootstrapUtils object is not there, make sure your have the correct path to the react-bootstrap package, are you packaging this with webpack or something ? if so you need to do extra steps to make it available in your ponents class declarations – ZEE Commented Oct 28, 2016 at 12:00
- I've checked the path, and bootstrapUtils file is there. It also has addStyle function in exports. Also, I'm using Webpack. – JustLogin Commented Oct 28, 2016 at 12:01
3 Answers
Reset to default 6Change to this:
import { bootstrapUtils } from 'react-bootstrap/lib/utils';
You can do this as well:
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() {
var styles={
"backgroundColor" : "purple",
"color" : "white"
};
return (
<div>
<Button style={styles} bsStyle="primary">Custom</Button>
</div>
);
}
}
bootstrapUtils
is a named export and not a default therefore you need to use {}
around it.
Try using:
import { bootstrapUtils } from 'react-bootstrap/lib/utils/bootstrapUtils';