score:0
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.
score:0
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>
score:0
i have created an issue to investigate if we can/should add the merging behavior to react-jss https://github.com/cssinjs/jss/issues/933
score:1
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 (e.g. '& > 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>
score: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>
);
Source: stackoverflow.com
Related Query
- Merge classes with JSS instead of overriding
- Overriding with classes in material-ui v1.0.0-beta-1 shows "the key provided to the classes property is not implemented" warning
- How can I override classes with JSS
- Icons from react-icons with classes name instead of component
- CSS overriding with classes
- React showing 0 instead of nothing with short-circuit (&&) conditional component
- Before and After pseudo classes used with styled-components
- React statics with ES6 classes
- How to emulate window.location with react-router and ES6 classes
- React with JetBrains WebStorm auto import with absolute path instead of relative
- Removing an item causes React to remove the last DOM node instead of the one associated with that item
- How can I develop locally using a domain name instead of 'localhost:3000' in the url with create-react-app?
- Change classes to an element with react
- Relay: How to merge instead of override queries in nested routes?
- How to style input tag without class with JSS
- WebStorm - autocomplete React className attribute with quotes instead of object literals
- React with Ecmascript6 classes problems using Chrome
- Overriding react components styles with styled component
- Using ES6 Classes with Redux
- Target specific CSS classes with Styled Components
- Typescript declaration file created with alias instead of relative path
- Reactjs : Append instead of replacing with render method
- Overriding children prop in React with Typescript 3.5+
- Merge react app with react native app
- ReactJS- Use slug instead of Id in the URL with React router
- Why do my styled component keyframes error with ts-styled-plugin(9999) in react when using percentage instead of TO/FROM
- Static method is undefined in ES6 classes with a decorator in reactjs
- Meteor + webpack tutorial with blaze instead of react?
- How to TypeScript a props interface containing an object and merge with defaultProps
- Converting css with nested classes to styled components problem
More Query from same tag
- How to create one store per instance in Redux?
- Cannot add to list of items in ReactJS
- TypeError Cannot read property 'baseTheme' of undefined
- React hooks: new state value not reflecting in setInterval callback
- State Management in React
- ERR_HTTP2_INADEQUATE_TRANSPORT_SECURITY on dotnet core 3.1 react project
- Does ReactDOM.render wait for the document to be loaded before rendering?
- Can not compose withStyle, withWidth and injectIntl
- MERN API request, don't know how to make a put request and update properly
- show dynamic select items mapping over array of objects
- restful simple web api , how to make this project?
- How to change the next/IMage SRC conditionally on various screensize in taiwind css?
- No get query sting data in react
- How to update the value of object properties inside array?
- React "cannot access 'variable' before initialization" with useState callback
- Why am I getting a 'no-unused-vars' warning in a for...of loop and how do I fix it?
- delete objects from an array using filter - useState
- The <Link> from react-router-dom does not change the URL
- Responsive Carousel React material-ui
- Accessing object within array in ReactJS
- How to cancelled previous api from components when users changed route in reactjs?
- React conditional router for Cordova
- Use component onClick
- How to set the state for element after it mounted in react?
- Is there an example where using React.memo/PureComponent has worse performance than not using it?
- webpack terminal command results in /config/webpack/development.js not found
- Want to set the y axis ticks to a fixed value Highcharts
- Sign-in page wont show up
- how to edit and change/rename the title(React)
- is it possible to get multiple input from the input field which is created dynamically in react js?