正文 

当前位置： 首页 > 问答 >

无法使用 React 和 Bootstrap 创建自定义样式

     2023-02-22     67

关键词：

【中文标题】无法使用 React 和 Bootstrap 创建自定义样式【英文标题】：Cannot create custom style with React and Bootstrap 【发布时间】：2017-03-11 07:05:04 【问题描述】：

我正在使用react-bootstrap NPM 包来使我的React 组件看起来正确。我需要自定义其中一些，所以我关注official React-Bootstrap documentation，但是代码抛出了错误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>
        );

【问题讨论】：

你的 bootstrapUtils 对象不存在，确保你有正确的 react-bootstrap 包路径，你是用 webpack 还是其他东西打包它？如果是这样，您需要执行额外的步骤以使其在组件类声明中可用 我已经检查了路径，并且 bootstrapUtils 文件在那里。它还在导出中具有 addStyle 功能。另外，我正在使用 Webpack。 【参考方案1】：

改成这样：

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

【讨论】：

【参考方案2】：

bootstrapUtils 是一个命名导出而不是默认导出，因此您需要在它周围使用。

尝试使用： import bootstrapUtils from 'react-bootstrap/lib/utils/bootstrapUtils';

【讨论】：

Geraint 几乎是对的。您必须从路径中删除“/bootstrapUtils”。看我的回答【参考方案3】：

你也可以这样做：

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

【讨论】：

我可以将我的样式存储在 .css 中，还是必须在 JS 中声明它们？ 如何重构上面的代码以将样式存储在 .css 文件中？

在使用 React-bootstrap 库时无法应用任何 Bootstrap 样式

】在使用React-bootstrap库时无法应用任何Bootstrap样式【英文标题】：CannotapplyanyBootstrapstyleinusingReact-bootstraplibrary【发布时间】：2017-04-0815:06:00【问题描述】：我想在我的React应用程序中使用默认的Bootstrap组件，所以我使用了React-boot... 查看详情

使用 React Bootstrap 覆盖引导程序 4 时无法使 @media 查询工作

】使用ReactBootstrap覆盖引导程序4时无法使@media查询工作【英文标题】：Can\'tget@mediaqueriestoworkwhenoverridingbootstrap4usingReactBootstrap【发布时间】：2021-11-2818:07:54【问题描述】：基本上，使用引导程序4，我正在尝试使用引导程序类“自... 查看详情

如何使用 React-Bootstrap 根据项目计数创建带有拼接的轮播项目

】如何使用React-Bootstrap根据项目计数创建带有拼接的轮播项目【英文标题】：HowtocreatecarouselitemswithsplicebasedonitemcountusingReact-Bootstrap【发布时间】：2021-02-0514:48:00【问题描述】：我正在尝试拼接，以便每个页面（活动和其他项目... 查看详情

可以使用 React-bootstrap 进行 PurgeCSS 吗？

】可以使用React-bootstrap进行PurgeCSS吗？【英文标题】：PurgeCSSwithReact-bootstrappossible?【发布时间】：2020-09-2810:05:37【问题描述】：我有一个带有react-bootstrap、bootstrap和scss设置的gatsby站点，我正在尝试清除我未使用的css。为此，我需... 查看详情

React Bootstrap 无法渲染

】ReactBootstrap无法渲染【英文标题】：ReactBootstrapfailstorender【发布时间】：2016-01-0521:09:13【问题描述】：我刚刚安装了ReactBootstrap并开始学习使用它我从http://react-bootstrap.github.io/components.html上的教程开始<!DOCTYPEhtml><html><... 查看详情

无法在 React Bootstrap 的选项卡中使用表单

】无法在ReactBootstrap的选项卡中使用表单【英文标题】：UnabletouseForminsidetabsinReactBootstrap【发布时间】：2020-10-0523:19:51【问题描述】：render()return(<div><TabsdefaultActiveKey="profile"id="uncontrolled-tab-example"><Form><Tabe 查看详情

在 react-bootstrap 中更改 NavDropdown 的颜色和背景颜色

】在react-bootstrap中更改NavDropdown的颜色和背景颜色【英文标题】：Changecolor&background-colorofNavDropdowninreact-bootstrap【发布时间】：2018-11-3022:02:30【问题描述】：在react-bootstrap中使用我的NavDropdown，我无法设置其颜色或背景颜色的样... 查看详情

SO react-router-bootstrap 活动链接无法正常工作

】SOreact-router-bootstrap活动链接无法正常工作【英文标题】：SOreact-router-bootstrapactivelinknotworkingproperly【发布时间】：2018-11-2716:36:24【问题描述】：我在使用react-router-bootstrap(https://www.npmjs.com/package/react-router-bootstrap)组件的活动链接... 查看详情

React Bootstrap 工具提示无法在全屏上运行

】ReactBootstrap工具提示无法在全屏上运行【英文标题】：ReactBootstrapTooltipisnotworkingonfullscreen【发布时间】：2020-06-0109:05:27【问题描述】：我使用了ReactBootstrapReactBootstrapTooltipandOverlayTrigger附带的“工具提示”标签。代码运行良好。... 查看详情

如何使用 React 和 Rails 创建表单？

...请求伪造(CSRF)的安全性令牌。在React中我使用JSX，所以我无法在React组件中渲染erb。在React组件中，我手动编写HTML。我想在我的 查看详情

React-Bootstrap 导致左侧和右侧的边距

】React-Bootstrap导致左侧和右侧的边距【英文标题】：React-Bootstrapcausingmarginsonleftandrightside【发布时间】：2018-02-1910:45:34【问题描述】：我在我的React应用程序中使用React-Bootstrap。它导致左侧和右侧的边距。我正在使用以下代码：im... 查看详情

如何使用 React-Bootstrap 和 Redux 显示/隐藏 Modal？

】如何使用React-Bootstrap和Redux显示/隐藏Modal？【英文标题】：Howtoshow/hideaModalusingReact-BootstrapandRedux?【发布时间】：2021-11-2623:46:49【问题描述】：我正在学习redux，并试图让它与react-bootstrap模态一起工作。我希望模式显示redux中的... 查看详情

无法使用 Meteor 和 React 获取用户注册的 rif

】无法使用Meteor和React获取用户注册的rif【英文标题】：CannotgetrifofuserregistrationusingMeteorandReact【发布时间】：2017-08-0509:41:02【问题描述】：我是Meteor的新手，我正在研究它。实际上，我正在为每个注册用户创建一个带有私人控制... 查看详情

React-bootstrap NavBar 和组件定位使用 css 问题

】React-bootstrapNavBar和组件定位使用css问题【英文标题】：React-bootstrapNavBarandcomponentspositioningusingcssissue【发布时间】：2021-01-1909:16:45【问题描述】：我学习了Reactjs和Javascript，现在我有了这个react-bootstrapNavBar，想知道如何让这个搜... 查看详情

使用 LinkContainer 和来自 React Bootstrap 的 MenuItem 的未知道具“活动”

】使用LinkContainer和来自ReactBootstrap的MenuItem的未知道具“活动”【英文标题】：Unknownprop"active"usingLinkContainerwithMenuItemfromReactBootstrap【发布时间】：2017-04-2313:10:01【问题描述】：我有一个使用react-bootstrap构建的简单导航栏... 查看详情

React-bootstrap 元素没有样式

】React-bootstrap元素没有样式【英文标题】：React-bootstrapelementsdoesnothavestyling【发布时间】：2016-05-0813:37:17【问题描述】：我正在使用react.js和react-router和webpack开发一个webapp。我想使用react-bootstrap进行样式设置，但我的导航栏似乎... 查看详情

如何使用 React-Bootstrap 平滑水平折叠过渡？

】如何使用React-Bootstrap平滑水平折叠过渡？【英文标题】：HowtosmoothhorizontalcollapsetransitionwithReact-Bootstrap?【发布时间】：2020-06-1316:07:38【问题描述】：编辑：代码沙盒链接：https://codesandbox.io/s/strange-dawn-q9zow我正在创建一个想要有... 查看详情

在 React 中使用 CSS [关闭]

...我是React的初学者。到目前为止，我一直在使用AngularJS和bootstrap进行编码。我想创建一个响应式应用程序。我有几个问题要问已经在React上工作的开发人员：我倾向于像引导程序这样的东西是因为我不想花很多时间编写CSS。Bootstra... 查看详情