Reactjs 包装织物组件时，合并样式的最佳方法是什么？

假设我正在包装一个织物组件，其中应用了一些样式，并希望合并从其道具传入的任何样式。 我能想到的最好办法是：

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

---

我发现了

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

const{TextField，Fabric，ibutontops，concatStyleSetsWithProps}=window.Fabric；
常量MyTextField=（道具：IButtonProps）=>{
返回concatStyleSetsWithProps（props，{root:{maxWidth:250}，字段：{backgroundColor:“pink”}}，props.styles）}/>；
}
const TextFieldExample=（）=>（）；
常量ExampleWrapper=（）=>；
ReactDOM.render（，document.getElementById（'content'））

---

我不太明白你的问题。它类似于通过

Object.assign（）

合并对象吗？@JimJin中有一些实用程序函数，用于以JS样式合并CSS。这不是一个一般的Javascript问题，而是一个关于UI结构API的问题。

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