Динамически создавать новые классы в JSS - PullRequest
0 голосов
/ 15 октября 2019

Если у меня есть мои стили как

const useStyles = createUseStyles({
  title: {
    background: "red",
    _alternate: {
      background: "green"
    }
  },
  subTitle: {
    background: "blue"
  }
});

Как я могу создать классы

.title
.title_alternate
.subTitle

Похоже, что он успешно добавляется, когда я создаю свой собственный плагин, и появляется в таблице стилейна дом, но не вводится в компонент

https://codesandbox.io/s/youthful-proskuriakova-ybzdj

export default function jssBem() {
  const onCreateRule = (name, styles, options) => {
    const modifiers = Object.keys(styles)
      .filter(k => k[0] === "_")
      .map(k => ({ modifierName: `${name}${k}`, modifierStyles: styles[k] }));

    if (modifiers.length) {
      modifiers.forEach(({ modifierName, modifierStyles }) => {
        options.sheet.addRule(modifierName, modifierStyles, {
          ...options,
          isModifier: true
        });
      });
    }
    return null;
  };

  const onProcessRule = (rule, sheet) => {};

  const onProcessStyle = (style, rule) => {
    return style;
  };

  const onChangeValue = (value, prop, rule) => {};

  const onProcessSheet = sheet => {};

  const onUpdate = (data, rule, sheet) => {};

  return {
    onCreateRule,
    onProcessStyle,
    onProcessRule,
    onUpdate,
    onChangeValue,
    onProcessSheet
  };
}

...