Каков наилучший способ объединения стилей при упаковке компонентов Fabri c? - PullRequest
Новая
       6

Каков наилучший способ объединения стилей при упаковке компонентов Fabri c?

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

Учтите, что я обертываю компонент Fabri c, где я применяю некоторые стили и хочу объединить любые переданные стили из его реквизитов. Лучшее, что я могу придумать, это: 

const { TextField, Fabric , IButtonProps, mergeStyleSets } = window.Fabric;

const MyTextField = (props: IButtonProps) => {
  const  { styles, ...otherProps } = props;

  const myStyles = stylesProps => {
    // props.styles can be a function, an object or undefined
    const stylesAsObject = typeof (styles) === "function" ? styles(stylesProps) : styles;
    return mergeStyleSets({ root: { maxWidth: 250 }, field: { backgroundColor: "pink"}}, stylesAsObject);
  };

  return <TextField styles={myStyles} {...otherProps} />;
}

const TextFieldExample () => (<MyTextField readOnly value="My text field" styles={{field: { fontWeight: 600}}} />
  );

ReactDOM.render(<Fabric><TextFieldExample /></Fabric>, document.getElementById('content'));

Это работает , но немного многословно.

Есть ли какая-то версия наборов mergeStyle, где я мог бы вместо этого написать: 

const myStyles = mergeStylesets({ root: { maxWidth: 250 }, field: { backgroundColor: "pink"}}, props.styles);

1 Ответ

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

Я обнаружил concatStyleSetsWithProps: 

const { TextField, Fabric , IButtonProps, concatStyleSetsWithProps } = window.Fabric;

const MyTextField = (props: IButtonProps) => {
  return <TextField  {...props} styles={stylesProps => concatStyleSetsWithProps(props, { root: { maxWidth: 250 }, field: { backgroundColor: "pink"}}, props.styles)} />;
}

const TextFieldExample= () => (<MyTextField readOnly value="My text field" styles={{field: { fontWeight: 600}}} />);

const ExampleWrapper = () => <Fabric><TextFieldExample /></Fabric>;
ReactDOM.render(<ExampleWrapper />, document.getElementById('content'))

https://codepen.io/onlyann/pen/yLNXvPd?editors=1111

...