将类与JSS合并而不是覆盖

Question

I'm using React and JSS to try to build a small set of reusable components, but I'm running into issues trying to compose base components into more complex ones.

When I pass class names down from a parent component via the classes prop, it completely overrides the default styles instead of merging them. See the snippet below for a demonstration: when wrapped, the text input looses the border styles and only takes on the width specified in the wrapper.

 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> 

Instead of simply overriding the class name generated by the inner component, I want to apply that class, then the outer components custom styles on top of it. Essentially, I would like to make the classes prop work in an ' additive ' way.

Is there any way to do this gracefully?

Answer 1

We went for overriding behaviour. In some cases you want to add your class in some others you want to override them, but I don't think we can't have both at the same time.

Answer 2

I think you want something along the lines of the following:

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

Answer 3

Here is an alternative way to approach the problem. Instead of trying to pass a class from the parent to be merged in with the child's classes, influence the child using the parent's styles (eg '& > input': { width: 80 } ).

 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', '& > input': { width: 80 } }, label: { marginRight: 5, width: 40, } }; const InputField = ({ classes, id, label }) => ( <span className={classes.root}> <label className={classes.label} htmlFor={id}>{label}</label> <TextInput 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> </dl> ); } } render(<App />, document.getElementById('root')); 

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

Answer 4

我创建了一个问题来调查我们是否可以/应该将合并行为添加到react-jss https://github.com/cssinjs/jss/issues/933

Answer 5

Similar to one of the other solutions, but more robust to work with additional classes. We can use Object.values(classes).join(' ') to join all the classes passed to to the TextInput component.

Note that I also had to give the class a different key. classes={{root: classes.input}} became classes={{input: classes.input}} .

 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={Object.values(classes).join(' ')} 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={{input: 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>