react引导程序面包屑与react路由器dom改变背景颜色

Question

我想在使用react bootstrap面包屑时更改背景颜色。同时，我使用react路由器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。

非常感谢

Answer 1

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

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

只需注意内联样式应该遵循JSX样式的规则。