Альтернатива innerTheme, когда мы хотим иметь разные primaryTypographyProps - PullRequest
Новая
       4

Альтернатива innerTheme, когда мы хотим иметь разные primaryTypographyProps

0 голосов
/ 24 апреля 2019

У меня есть компонент, у которого список настроен с помощью ListeItems, а также значков и кнопок.Я хочу использовать этот компонент в 2 разных местах.В одном месте я установил реквизиты MuiListItemTextTypography следующим образом .. 

const theme = createMuiTheme({
.
.
.
typography: {
    useNextVariants: true
    body1: {
      fontSize: '14px'
    }
  },
props: {
    MuiListItemText: {
      primaryTypographyProps: {
        variant: "body1"
      },
      secondaryTypographyProps: {
        variant: "body2"
      }
    }
  }
})

Но второй компонент хочет, чтобы размер шрифта был 12 пикселей, поэтому я сделал это так 

const innerTheme = createMuiTheme({
  typography: {
    body1: {
      fontSize: '12px'
    }
  },
  props: {
    MuiListItemText: {
      primaryTypographyProps: {
        variant: "body1"
      },
      secondaryTypographyProps: {
        variant: "body1"
      }
    }
  }
});

и обернул второй компонент в новую тему 

<MuiThemeProvider theme={innerTheme}>
   <ListItems itemsList={secondItem}/>
</MuiThemeProvider>

Работает нормально, но недостатком является то, что я теряю все стили, установленные в основной теме, когда оборачиваю его во внутреннюю тему

Какмогу ли я сделать это, чтобы не потерять все это в первой теме.

1 Ответ

0 голосов
/ 24 апреля 2019

Вот хороший пример того, как это сделать: Вложение темы

MuiThemeProvider принимает функцию, поэтому вы можете переопределить innerTheme как: 

const innerTheme = {
  typography: {
    body1: {
      fontSize: '12px'
    }
  },
  props: {
    MuiListItemText: {
      primaryTypographyProps: {
        variant: "body1"
      },
      secondaryTypographyProps: {
        variant: "body1"
      }
    }
  }
}

А затем измените разметку на: 

<MuiThemeProvider theme={theme => createMuiTheme({...theme, ...innerTheme})}>
  <ListItems itemsList={secondItem}/>
</MuiThemeProvider>
...