Как разделить класс JSS между несколькими компонентами, расположенными в нескольких файлах? - PullRequest
Новая
       9

Как разделить класс JSS между несколькими компонентами, расположенными в нескольких файлах?

0 голосов
/ 26 октября 2018

Я использую React с Material UI и сейчас выполняю рефакторинг одного из моих компонентов.Мой оригинальный компонент выглядит примерно так: 

// All the import statements here

const styles = theme => ({
  container: {
    margin: 'auto',
    maxWidth: '1200px',
    background: theme.palette.primary.main
    // More styles here
  },
});

const Component = ({ classes }) => (
  <div>
    <div className={classes.container}>
      {/* Some content */}
    </div>
    <div className={classes.container}>
      {/* Some content */}
    </div>
  </div>
);

export default withStyles(styles)(Component);

Но после рефакторинга компонента мне нужно получить доступ к классу 'container' в двух разных компонентах.Единственный подход, который я мог придумать, - это создать в моем корне новый файл с именем sharedStyles.js, который я затем импортирую в оба этих компонента и расширю его объект стиля следующим образом:

File: sharedStyles.js 

export default theme => ({
  container: {
    margin: 'auto',
    maxWidth: '1200px',
    background: theme.palette.primary.main
    // Some more styles
  },
});

Файл: NewComponent.js 

// All the import statements here - including the sharedStyles.js

const styles = theme => ({
  ...sharedStyles(theme),
  // Some more styles
});

const NewComponent = ({ classes }) => (
  <div className={classes.container}>
    {/* Some content */}
  </div>
);

export default withStyles(styles)(NewComponent);

Файл: RefactoredComponent.js 

// All the import statements here - including the sharedStyles.js 
// and NewComponent.js

const styles = theme => ({
  ...sharedStyles(theme),
  // Some more styles
});

const RefactoredComponent = ({ classes }) => (
  <div>
    <NewComponent />
    <div className={classes.container}>
      {/* Some content */}
    </div>
  </div>
);

export default withStyles(styles)(RefactoredComponent);

Хотя этот подход работает, мне он не очень нравится.Поэтому мой вопрос: Есть ли лучший способ, как разделить один класс JSS между несколькими компонентами, расположенными в нескольких файлах? .

...