Блог

Я хочу изменить цвет фона при использовании react-bootstrap breadcrumb. в то же время я использовал react-router-dom для реализации breadcrumb

 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 developer tools. Это то, что я хочу.
Как я могу записать файл css и куда я должен поместить файл css? чтобы перезаписать цвет по умолчанию # f5f5f5 .

Большое вам спасибо

В приложении react глобальный стиль находится в файле App.css (или даже в файле Index.css). Вы могли бы поместить этот стиль туда, если хотите, чтобы это был глобальный стиль. Если вы хотите, чтобы это был локальный стиль, вы могли бы просто добавить встроенный стиль к вашему компоненту. Нравится :

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

Просто обратите внимание, что встроенный стиль должен соответствовать правилу стиля JSX.