ReactJS материал makeStyles - PullRequest
Новая
       54

ReactJS материал makeStyles

0 голосов
/ 17 февраля 2020

У меня есть своя тема, я могу хорошо ее оформить. Прямо сейчас у меня есть три разных стиля с материальными вкладками пользовательского интерфейса. Вот почему мне нужно изменить стили с помощью makeStyles.

Это пример вкладки, которую мне нужно изменить 

...

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.pallete.primary
  },
  tabs: {
  /// some styles
  }
...
}
));

...


<Tabs
 ...someProps
 className={classes.tabs}
>

элемент внутри вкладки имеет такие классы: 

 <button class="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary Mui-selected MuiTab-labelIcon">

Я пытался редактировать стили так же, как 

... = createMuiTHeme ({
overrides: {
...some overrides
}

в моем случае: 

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: "#121D42",
   MuiButtonBase: {
    root: {
    ///some styles
    },
   }
  },
...

, но это не работает с makeStyles

Так как я могу редактировать кнопки внутри вкладок используя makeStyles (), возможно ли это? Или помогите с решением, пожалуйста

1 Ответ

0 голосов
/ 18 февраля 2020

Я нашел решение на данный момент.

Используя стилизованные компоненты и создав стилизованный элемент - мы можем легче менять стили. Мы должны StylesProvider 

const NewButton = styled(({styledComponentProp, ...rest}) => (
  <Button classes={{label: 'label'}} {...rest}/>
))`
  .label {
    color: blue;
    font-size: ${props => props.styledComponentProp};
  }  
`



export const BlueButton = styled(props => {
  return (

    <StylesProvider injectFirst>
    <NewButton variant="contained" styledComponentProp="20px"> Red Labeled Button </NewButton>
  </StylesProvider>
  );
})`

`;

Но есть ли у нас лучшие решения?

...