How can i dry up this react/material ui code?

Question

There is a lot being repeated here but i can't seem to clean it up and have it work. Specifically, the switch statement. Do i really need this? Yet, seems like it needs to be passed the muiTheme palette this way. Also, could these theme const's be put in another file and then imported? If so, i haven't done so successfully.

import React, { Component } from 'react';
import {
    pinkA100,
    pinkA200,
    pinkA400,
    cyan500,
    cyan700,
    grey100,
    grey300,
    grey400,
    grey500,
    grey600,
    darkBlack,
    fullBlack,
    fullWhite,
    white
} from 'material-ui/styles/colors';
import { fade } from 'material-ui//utils/colorManipulator';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';

import Header from './Header';
import Landing from './Landing';

const muiThemeLight = getMuiTheme({
    palette: {
        primary1Color: cyan500,
        primary2Color: cyan700,
        primary3Color: grey400,
        accent1Color: pinkA200,
        accent2Color: grey100,
        accent3Color: grey500,
        textColor: darkBlack,
        alternateTextColor: white,
        canvasColor: white,
        borderColor: grey300,
        disabledColor: fade(darkBlack, 0.3),
        pickerHeaderColor: cyan500,
        clockCircleColor: fade(darkBlack, 0.07),
        shadowColor: fullBlack
    }
});

const muiThemeDark = getMuiTheme({
    palette: {
        primary1Color: cyan700,
        primary2Color: cyan700,
        primary3Color: grey600,
        accent1Color: pinkA200,
        accent2Color: pinkA400,
        accent3Color: pinkA100,
        textColor: fullWhite,
        secondaryTextColor: fade(fullWhite, 0.7),
        alternateTextColor: '#303030',
        canvasColor: '#303030',
        borderColor: fade(fullWhite, 0.3),
        disabledColor: fade(fullWhite, 0.3),
        pickerHeaderColor: fade(fullWhite, 0.3),
        clockCircleColor: fade(fullWhite, 0.12)
    }
});

class App extends Component {
    componentDidMount() {
        this.props.fetchUser();
    }

    render() {
        switch (this.props.muiTheme.theme) {
            case 'lightTheme':
                return (
                    <MuiThemeProvider muiTheme={muiThemeLight}>
                        <BrowserRouter>
                            <div>
                                <Header />
                                <Route exact path="/" component={Landing} />
                            </div>
                        </BrowserRouter>
                    </MuiThemeProvider>
                );
            case 'darkTheme':
                return (
                    <MuiThemeProvider muiTheme={muiThemeDark}>
                        <BrowserRouter>
                            <div>
                                <Header />
                                <Route exact path="/" component={Landing} />
                            </div>
                        </BrowserRouter>
                    </MuiThemeProvider>
                );
            default:
                return (
                    <MuiThemeProvider muiTheme={muiThemeLight}>
                        <BrowserRouter>
                            <div>
                                <Header />
                                <Route exact path="/" component={Landing} />
                            </div>
                        </BrowserRouter>
                    </MuiThemeProvider>
                );
        }
    }
}

function mapStateToProps({ form, muiTheme, auth }) {
    return { form, muiTheme, auth };
}
export default connect(mapStateToProps, actions)(App)

;

Answer 1

render() {
    const theme = this.props.muiTheme.theme === 'darkTheme' ? muiThemeDark : muiThemeLight
    return (
        <MuiThemeProvider muiTheme={theme}>
            <BrowserRouter>
                <div>
                    <Header />
                    <Route exact path="/" component={Landing} />
                </div>
            </BrowserRouter>
        </MuiThemeProvider>
    );
}

Update: Note that this code flattens the code in original answer which only has two options. If multiple options are needed then it would be best to use an object to keep track of the themes.

render() {
    const inputThemeMap = {
        darkTheme: muiThemeDark,
        lightTheme: muiThemeLight,
        forestTheme: muiThemeGreen,
        sunlightTheme: muiThemeYellow
    };

    const theme = inputThemeMap[this.props.muiTheme.theme] || muiThemeLight;

    return (
        <MuiThemeProvider muiTheme={theme}>
            <BrowserRouter>
                <div>
                    <Header />
                    <Route exact path="/" component={Landing} />
                </div>
            </BrowserRouter>
        </MuiThemeProvider>
    );
}