最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Cannot create custom style with React and Bootstrap - Stack Overflow

programmeradmin3浏览0评论

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
Add a ment  | 

3 Answers 3

Reset to default 6

Change 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';

发布评论

评论列表(0)

  1. 暂无评论