javascript - 使用 JSS 合并类而不是覆盖

Question

我正在使用 React 和 JSS 尝试构建一小组可重用组件，但在尝试将基本组件组合成更复杂的组件时遇到了问题。

当我通过 classes 属性从父组件向下传递类名时，它会完全覆盖默认样式而不是合并它们。请参阅下面的代码片段以获取演示:包装时，文本输入会松开边框样式，仅采用包装器中指定的宽度。

const { Component } = React;
const { render } = ReactDOM;
const injectSheet = reactJss.default;

// TextInput.jsx
const TextInput = (() => {
  const styles = {
    root: {
      border: '1px solid #ccc',
      borderRadius: 3,
    }
  };
  const TextInput = ({ classes, ...rest }) => (
    <input className={classes.root} type="text" {...rest} />
  );
  return injectSheet(styles)(TextInput);
})();

// InputField.jsx
const InputField = (() => {
  const styles = {
    root: {
      display: 'inline-flex',
    },
    label: {
      marginRight: 5,
      width: 40,
    },
    input: {
      width: 80,
    },
  };
  const InputField = ({ classes, id, label }) => (
    <span className={classes.root}>
      <label className={classes.label} htmlFor={id}>{label}</label>
      <TextInput classes={{root: classes.input}} id={id} />
    </span>
  );
  return injectSheet(styles)(InputField);
})();


// Demonstration
class App extends Component {
  render() {
    return (
      <dl>
        <dt>Without Wrapper:</dt>
        <dd><TextInput /></dd>
        <dt>With Wrapper:</dt>
        <dd><InputField id="f" label="Foo"/></dd>
        <dt>What I want:</dt>
        <dd><InputField classes={{input: 'generated-by-TextInput-root generated-by-InputField-input'}} id="b" label="Foo"/></dd>
      </dl>
    );
  }
}

render(<App />, document.getElementById('root'));

.generated-by-TextInput-root {
  border: 1px solid #ccc;
  border-radius: 3px;
}

.generated-by-InputField-input {
  width: 80px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jss/9.8.7/jss.min.js"></script>
<script src="https://unpkg.com/react-jss@8.6.1/dist/react-jss.min.js"></script>
<div id="root"></div>

我不想简单地覆盖内部组件生成的类名，而是应用该类，然后外部组件在其之上自定义样式。本质上，我想让 classes Prop 以“加法”的方式工作。

有什么办法可以优雅地做到这一点？

Answer 1

我认为您需要以下内容:

...
const TextInput = ({ classes, classesFromParent, ...rest }) => (
    <input className={classes.root + ' ' + classesFromParent.root} type="text" {...rest} />
);
...
const InputField = ({ classes, id, label }) => (
    <span className={classes.root}>
      <label className={classes.label} htmlFor={id}>{label}</label>
      <TextInput classesFromParent={{root: classes.input}} id={id} />
    </span>
);