Material-ui黑暗主题与symfony互动

如何解决Material-ui黑暗主题与symfony互动

我正在使用React 16.13和Symfony 4.4.13。

我在将应用置于暗模式时遇到了一些问题。奇怪的是，我可以轻松更改const theme中的某些参数，例如原色和辅助色，但是type:'dark'没有任何效果（例如，没有黑色背景色）。

我的App.js：

import ReactDOM from "react-dom";
import DefaultThemeProvider from "./Theme/theme";
import React from "react";
import Button from "@material-ui/core/Button";

const App = () => {
    return (
        <Button variant="contained" color="primary" href="#contained-buttons">
            Link
        </Button>
    )
};

const rootElement = document.querySelector('#app');
ReactDOM.render(
    <DefaultThemeProvider>
    <App/>
    </DefaultThemeProvider>,rootElement);

我的theme.js：

import {createMuiTheme } from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
import React from "react";
import {MuiThemeProvider} from "@material-ui/core";

const theme = createMuiTheme({
    palette: {
        type: 'dark',primary: {
            main: '#4444',},secondary: {
            main: green[700],});

const DefaultThemeProvider = (props) => {
    return (
        <MuiThemeProvider theme={theme}>
            {props.children}
        </MuiThemeProvider>
    );
};
export default DefaultThemeProvider;

我的package.json

{
    "devDependencies": {
        "@babel/preset-react": "^7.10.4","@symfony/webpack-encore": "^0.30.0","core-js": "^3.0.0","node-sass": "^4.14.1","regenerator-runtime": "^0.13.2","sass-loader": "^8.0.2","webpack-notifier": "^1.6.0"
    },"license": "UNLICENSED","private": true,"scripts": {
        "dev-server": "encore dev-server --port 8080","dev": "encore dev","watch": "encore dev --watch","build": "encore production --progress"
    },"dependencies": {
        "@material-ui/core": "^4.10.2","@material-ui/icons": "^4.9.1","@material-ui/lab": "^4.0.0-alpha.56","@material-ui/styles": "^4.10.0","@material-ui/system": "^4.9.14","axios": "^0.20.0","bootstrap": "^4.5.2","react": "^16.13.1","react-dom": "^16.13.1","react-router-dom": "^5.2.0"
    }
}

我的webpack.config.js

var Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setoutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONfig
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app','./assets/js/app.js')
    //.addEntry('page1','./assets/js/page1.js')
    //.addEntry('page2','./assets/js/page2.js')

    // When enabled,Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but,you probably want this,unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONfig
     *
     * Enable & configure other features below. For a full
     * list of features,see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enabLeversioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoprovidejQuery()

    // uncomment if you use API Platform Admin (composer req api-admin)
    .enableReactPreset()
    //.addEntry('admin','./assets/js/admin.js')
;

module.exports = Encore.getWebpackConfig();

就像我正在使用symfony一样，我想知道我的webpack.config.js是否与某件事有关？

我注意到我可以在道具参数中看到暗模式！

my props log