包装Fabric组件时合并样式的最佳方式是什么

Question

考虑我正在包装一个Fabric组件，在该组件中我应用了一些样式，并希望合并来自其道具的任何传入样式。我能想出的最好的办法是：

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'));

这很有效，但有点冗长。

有没有什么版本的mergeStylesets可以让我写：

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

Answer 1

我发现了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