Реагируйте: Как объединить каждый из нескольких стилей, отмеченных в Material-UI - PullRequest
Новая
       63

Реагируйте: Как объединить каждый из нескольких стилей, отмеченных в Material-UI

1 голос
/ 17 марта 2020

У меня есть два стиля.

Одна вещь включена в определенные c компоненты, другая вещь включена в глобальные компоненты. Например,

, давайте предположим, что у нас есть следующее дерево . 

index.tsx
-App.tsx
-globalConstants.ts

в globalConstants.ts 

import { Theme, makeStyles, createStyles } from '@material-ui/core/styles';

export const sharedStyles = makeStyles((theme: Theme) =>
  createStyles({
    .
    .
    .
  }),
);

в App.tsx 

import React from 'react';
import { Theme, makeStyles, createStyles } from '@material-ui/core/styles';
import { sharedStyles } from '../constants/globalConstants'

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    .
    .
    .
  }),
);

Моя проблема в том, что я не могу объединить useStyles и sharedStyles в один класс переменная.

Конечно, я могу использовать это следующим образом 

export default function NavBar() {
  const classes = useStyles();
  const sharedClasses = sharedStyles();
}

Но я бы хотел объединить классы и sharedClasses в одну константу, такую ​​как 

const classes = {useStyles()+sharedStyles())

Есть ли какой-нибудь хороший способ как это совместить?

1 Ответ

0 голосов
/ 17 марта 2020

Что ж, похоже, это приводит нас к открытому ответу, но я бы хотел предложить какой-то подход, который я нашел.

См. Официальный документ material-ui: styles_advanced

Вы можете использовать сторонние библиотеки, такие как clsx . 

import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';

const useStylesBase = makeStyles({
  root: {
    color: 'blue', // ?
  },
});

const useStyles = makeStyles({
  root: {
    color: 'red', // ?
  },
});

export default function MyComponent() {
  // Order doesn't matter
  const classes = useStyles();
  const classesBase = useStylesBase();

  // Order doesn't matter
  const className = clsx(classes.root, classesBase.root)

  // color: red ? wins.
  return <div className={className} />;
}

Я уверен, что есть много похожих библиотек, поэтому выберите ту, которая вам нравится о.

И вы можете реализовать это самостоятельно, см. пример в этом выпуске 

function combineStyles(...styles) {
  return function CombineStyles(theme) {
    const outStyles = styles.map((arg) => {
      // Apply the "theme" object for style functions.
      if (typeof arg === 'function') {
        return arg(theme);
      }
      // Objects need no change.
      return arg;
    });

    return outStyles.reduce((acc, val) => Object.assign(acc, val));
  };
}

export default combineStyles;

Надеюсь, этот ответ вас хорошо устроит.

...