Chciałem zobaczyć mój zawarty kolor podstawowy był nieznacznie zmieniony, gdy temat zmieniono, ale nie mogłem.

Widziałem, że zadziałałem, jeśli zmieniłem przycisk z przycisku zawartego do przycisku tekstowego, usuwając "wariant =" zawarte "", ale naprawdę chcę użyć przycisku zawierającego

Czy jest jakiś sposób, aby to zadziałało?

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  // Because of <React.StrictMode>, <CssBaseline /> didn't work when theme was changed.
  // <React.StrictMode>
  //   <App/>
  // </React.StrictMode>,
  <App />,
  document.getElementById('root')
);

App.js

import React, { useState } from 'react';
import './App.css';
import { Button, Container } from '@material-ui/core';
import ChangeTheme from './components/ChangeTheme';
import { lightTheme, darkTheme } from './libs/Theme';
import { MuiThemeProvider, CssBaseline} from '@material-ui/core';


function App() {
  const [theme, setTheme] = useState(darkTheme);

  const handleChangeTheme = (setDark) => {
    setDark === true ? setTheme(darkTheme) : setTheme(lightTheme);
  }

  return (
    <MuiThemeProvider theme={theme}>
      <CssBaseline />
      <Button variant="contained" color="primary">Hi</Button>
    </MuiThemeProvider>
  );
}

export default App;

Libs / theme.js.

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core';

export const lightTheme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'light'
    }
  })
);

export const darkTheme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'dark'
    }
  })
);
1
Jason KIM 9 październik 2020, 02:20

1 odpowiedź

Najlepsza odpowiedź

Dzieje się tak dlatego, że auto wygenerowany mroczny motyw dostarczany przez materiały UI zmienia tylko określone kolory z palety. Nie nie Zmień podstawowy / dodatkowy tło (kolory secondary.main lub secondary.main).

Sprawdź Ta strona z ich witryny, która wymienia kolory, które zmieniane są przez auto generowany ciemny motyw. Znajdziesz tam, że kolor tekstowy jest wśród kolorów zmienianych na zmianę tematu; To wyjaśnia, dlaczego można zobaczyć zmianę w przycisku {X0}}, ale nie w variant="contained" jeden.

Najlepszym zakładem jest ręczne określenie zmienionych kolorów do mrocznego motywu w deklaracji tematu. Coś jak:

export const darkTheme = responsiveFontSizes(
  createMuiTheme({
    palette: {
      type: 'dark',
      primary: {
        main: "#000000" /*or whatever color you desire */
      }
    }
  })
);
2
Arjun 9 październik 2020, 04:00