不能用React和Bootstrap创建自定义样式

Cannot create custom style with React and Bootstrap

本文关键字：创建 自定义 样式 Bootstrap React 不能      更新时间：2023-09-26

我使用react-bootstrap NPM包使我的React组件看起来正确。我需要自定义其中的一些，所以我遵循官方的React-Bootstrap文档，但代码抛出错误index.jsx:5 Uncaught TypeError: Cannot read property 'addStyle' of undefined。

这是我自定义的Button组件代码:

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>
        );
    }
}

改成:

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

您也可以这样做:

    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是一个命名的导出，而不是默认的，因此你需要在它周围使用{}。

尝试使用:import { bootstrapUtils } from 'react-bootstrap/lib/utils/bootstrapUtils';

相关文章：