时间戳

首页 > 解决方案 > react-bootstrap 面包屑与 react-router-dom 更改背景颜色

reactjs - react-bootstrap 面包屑与 react-router-dom 更改背景颜色

问题描述

我想在使用 react-bootstrap 面包屑时更改背景颜色。同时我使用 react-router-dom 来实现面包屑

import React from 'react';
import { Link } from 'react-router-dom';

import { Breadcrumb, BreadcrumbItem } from 'react-bootstrap';

export default (props = {}) => {
    const items = props.items.map(item => (item.active ?
        <BreadcrumbItem active>{item.name}</BreadcrumbItem>
        :
        <BreadcrumbItem>
            <Link to={item.href}>
                {item.name}
            </Link>
        </BreadcrumbItem>
    ));
    return (
        <Breadcrumb>{items}</Breadcrumb>
    );
};

现在颜色是#f5f5f5 我想把它改成#ffffff;

    .breadcrumb {
    padding: 8px 15px;
    margin-bottom: 15px;
    list-style: none;
    background-color: #ffffff;
    border-radius: 4px;
}

这是来自 chrome 开发者工具。这就是我想要的。如何编写 css 文件，我应该将 css 文件放在哪里？重写默认颜色 #f5f5f5 。

太感谢了

标签： reactjsreact-routerbackground-colorreact-bootstrapbreadcrumbs

解决方案

在 react 应用程序中，全局样式在 App.css 文件（甚至 Index.css 文件）中。如果你想让它成为一种全局风格，你可以把它放在那里。如果您希望它成为本地样式，您可以简单地向组件添加内联样式。喜欢 ：

<Component style={{backgroundColor: "#fff"}} />

请注意，内联样式应该遵循 JSX 样式的规则。

推荐阅读