Как передать стиль className подкомпоненту в `material-ui`? - PullRequest
Новая
       5

Как передать стиль className подкомпоненту в `material-ui`?

1 голос
/ 21 мая 2019

Материал интерфейса использует className для слежки. Но как я могу передать стиль компоненту подреагирования?

Ниже приведено определение моего стиля. 

const styles = createStyles({
      root: {
        backgroundColor: 'transparent !important',
        boxShadow: 'none',
        paddingTop: '25px',
        color: '#FFFFFF'
      },
      subComponentStyle: {
         ...
      }
    });

И я использую это как: 

...
const NavigationBar = (props) => {
   const { classes } = props;
   return ( 
       <div className={classes.root}>
        // Add other code here
          <SubComponent ... > // how to pass `classes.subComponentStyle` style here
       </div>
   )
}
...
export default withStyles(styles)(NavigationBar);

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

Мой SubComponent экспортируется как: 

const styles = createStyles({
   ...
});

const SubComponent = ({classes}) => {
...
}

export default withStyles(styles)(SubComponent);

как видите, у него есть свой classes. Я не хочу полностью переопределять его классы. Есть ли способ объединить переданные в классы с его внутренними классами?

1 Ответ

1 голос
/ 21 мая 2019

// Отредактировано для объединенных стилей

Интерфейс MUI объединит стили, если вы пропустите классы, а также оберните ребенка стилем. а именно: 

import { styles } from './NavStyles'

const NavigationBar = (props) => {
   const { classes } = props;
   return ( 
       <div className={classes.root}>
          <SubComponent classes={classes} >
       </div>
   )
};

export default withStyles(styles)(NavigationBar);

и затем также применять стили к дочернему компоненту 


import { styles } from './SubCompStyles'

const SubComponent = ({classes}) => {
 // classes object is a merge of both parent and child styles
 // ... component logic
};

export default withStyles(styles)(SubComponent)
...