小编n-d*_*evr的帖子

我目前正在使用全局主题覆盖自定义一些组件，希望尽可能保持 Material-UI 主题引擎的完整性。我知道我可以使用组合来完成我想要做的事情，但我想看看是否可以通过覆盖来实现这一点。

目标

将 BottomNavigation 组件的背景色更改为使用当前主题的主色，并确保标签的颜色在该背景色之上清晰易读。

我目前的方法

const theme = createMuiTheme({
    palette: {
      primary: {
        main: 'rgba(217,102,102,1)'
      }
    },
    overrides: {
        MuiBottomNavigation: {
            root: {
                backgroundColor: 'rgba(217,102,102,1)'
            }
        },
        MuiBottomNavigationAction: {
            wrapper: {
                color: '#fff'
            }
        }
    }
});

此代码完成任务并将底部导航变为红色，将标签/图标变为白色。但是，我希望能够灵活地更改调色板中的主要颜色并相应地更新组件。

我想做什么

const theme = createMuiTheme({
    palette: {
      primary: {
        main: 'rgba(217,102,102,1)'
      }
    },
    overrides: {
        MuiBottomNavigation: {
            root: {
                backgroundColor: 'primary.main'
            }
        },
        MuiBottomNavigationAction: {
            wrapper: {
                color: 'primary.contrastText'
            }
        }
    }
});

通过这种方式，我可以轻松更新原色，而不必担心在我的覆盖范围内更改对它的每个引用。我意识到我可以将rgba值提取到 a 中const …

我有一个加载公寓列表并显示它们的路线:

app.get( '/condo-list', middleware.loadCondoList, routes.views.condolist );

loadCondoList中间件调用CondoBuilding模型并在res.locals上设置结果:

exports.loadCondoList = function loadCondoList( req, res, next ) {

console.log( 'request url: ' + req.url );
console.log( 'getting condo buildings...' );

CondoBuilding.model
    .find()
    .exec( ( err, condos ) => {
        if ( err ) {
            // pass error along
            next( err );
        } else {
            // add CondoBuildings to locals
            res.locals.condoBuildings = condos;
            next();
        }
    });
};

对数据库的调用成功,页面按预期呈现.但是,由于某种原因,路线运行了两次.控制台输出如下:

request url: /condo-list
getting condo buildings...
GET /condo-list 304 344.532 ms
request url: /condo-list
getting …