/ styles / withStyles defaultTheme опция, не может установить пользовательскую тему

Question

Попытка объединить пользовательские параметры темы с параметрами по умолчанию, чтобы мой пользовательский компонент использовал мою тему без использования оболочки ThemeProvider.

Новый материал-ui / styles / withStyles (mui v4-alpha) имеет дополнительную опцию defaultTheme, которая перезаписывается переданной единицей, я пытаюсь сбросить defaultTheme на myTheme, но не повезло. Пожалуйста, помогите мне достичь этого.

Это то, что я сейчас пытаюсь.

import React from 'react'
import Button from '@material-ui/core/Button'
import { createMuiTheme } from '@material-ui/core/styles'
import { withStyles } from '@material-ui/styles'

const styles = (theme) => {
  // here i'm getting myTheme with red palette.primary.main
  console.log(theme)
  return {}
}

export const MyButton = (props) => <Button {...props}/>

// reset primary color to red, so MyButton primary will be always red. 
// Here i mean much more complex extend with props and overrides keys (not only palette) 
const myTheme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff0000',
    }
  }
})

export default withStyles(styles, {defaultTheme: myTheme})(MyButton)

Но в итоге мой MyButton по-прежнему использует синий цвет mui по умолчанию в качестве основного. Что я делаю не так? Заранее спасибо!

P.S. Если я заверну <Button... в <ThemeProvider theme={myTheme}><Button..., все хорошо, красная кнопка.

------------------ edit # 1 ------------------

Похоже, мой код не работает по следующей причине.

Базовое ядро ​​по умолчанию Button Сам компонент использует ту же функцию withStyles без опции defaultTheme (опция только name) export default withStyles(styles, { name: 'MuiButton' })(Button);. Означает, что Button сама будет использовать тему по умолчанию import defaultTheme from './defaultTheme'; (withStyle.js).

Это означает, что я могу использовать опцию DefaultTheme со стилем для своих собственных компонентов, но не для существующего ядра один раз.

Тогда у меня есть еще один вопрос ... Можно ли применить myTheme (расширение defaultTheme) к базовому компоненту mui по умолчанию? (хочу просто импортировать myButton куда-то еще без использования ThemeProvider, аналогично тому, как я импортирую основные компоненты)

Answer 1

Я считаю, что вы не можете сделать это без изменения ядра API, оно реализовано с темой по умолчанию, и способ изменить это, как вы уже сделали, используя MuiThemeProvider. То, что вы можете сделать, это использовать поставщика тем внутри вашего компонента, а затем экспортировать его, и когда вы используете его в другом коде, вам не нужно ничего оборачивать. Как это:

import React from 'react'
import Button from '@material-ui/core/Button'
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';

const theme = createMuiTheme({
  palette: {
    primary: { main: purple[500] },
  },
});

function CustomButton() {
  return (
    <MuiThemeProvider theme={theme}>
      <Button color="primary">example</Button>
    </MuiThemeProvider>
  );
}

export default CustomButton;

И если это одноразовое изменение, вы можете использовать встроенный стиль с:

import React from 'react';
import Button from '@material-ui/core/Button';

const style = {
  minWidth: "200px",
  height:   "50px",
  padding:  "0 30px",
  fontSize: "1.125rem",
  lineHeight:   "50px",
  borderRadius: "3px",
  textAlign:    "center",
  textTransform:    "uppercase",
  transition:   "color 0.4s, background-color 0.4s, border-color 0.4s",
  letterSpacing: "0.05rem",
  textIndent: "0.1rem",
  textDecoration: "none",
  cursor: "pointer",
  overflow: "hidden",
  color: "#ffffff",
  backgroundColor: "#0096d6",
  border: "1px solid #0096d6",
};

function CustomButton() {
  return (
    <Button style={style}>example/Button>
  );
}

export default CustomButton;