score:0
as i understand, you want to:
- reuse some common properties like
width
andfontsize
. - custom render other properties like
color
.
then this is my approach:
- first, make new style for commonly used properties.
- secondly, create new styles for conditional use of each state.
- last, use something like classnames to combine all classes.
so the main idea here is: instead of using one class for each item, now using two classes for each one. that's it!
const usestyles = withstyles({
commonproperty: {
fontsize: '20px',
width: '20px',
},
successonlyproperty: {
color: 'green'
},
warningonlyproperty: {
color: 'orange'
},
});
Source: stackoverflow.com
Related Query
- pass material ui styles to component - react
- material ui styles inside react component
- How can I access to change styles of inner items of a component in react and material ui?
- Material UI Menu component is not getting the styles applied in react
- Pass a function to a component arrived as '' Props ''. - React - Material UI
- How to pass parameter in material ui react styled component
- How to pass in a react component into another react component to transclude the first component's content?
- Pass react component as props
- React Router Pass Param to Component
- React - how to pass state to another component
- React - How to pass props to a component passed as prop
- React testing library on change for Material UI Select component
- How to make the whole Card component clickable in Material UI using React JS?
- React react-router-dom pass props to component
- Is it possible to pass a React Component as argument in between functions of a Container Component
- Is there a right way to pass data into a React component from the HTML page?
- React : Pass function to child component
- Is there any possibility to pass text between react component tags?
- How to pass a state className variable to another component in react
- How to pass props to component inside a React Navigation navigator?
- React Pass function to child component
- how to make material data grid width to fill the parent component in react js
- How to pass an event handler to a child component in React
- Test React component method is calling function pass as a prop
- using css modules in react how can I pass a className as a prop to a component
- How to pass the match when using render in Route component from react router (v4)
- How to pass in an instance variable from a React component to its HOC?
- pass "key" param to react component
- Pass style as props in react component
- React Native pass function to child component as prop
More Query from same tag
- click event inside of <tr tag
- 'Error: Objects are not valid as a React child (found: object with keys {results, info})'
- How can I use the result array in my normalized state to render posts in sorted order
- Get oneOf-prop to change className, CSS modules
- Unable to send data from react to express server
- Where does the logic go with SwiftUI compared to React?
- React Redux: Can useDispatch be used to connect to an action creator? If so , how?
- Material-UI error with Tables in react
- Avoiding infinite useEffect loop while reflecting state change in React
- I want to find the path of the folder
- How do I detect when I've reached the end of an array in a react functional component?
- React-bootstrap NavBar not getting correct styles
- CORS Issue with React app and Laravel API
- Why do I encounter: "TypeError: t(...).isPlaceholder is not a function" when "import './bootstrap/dist/css/bootstrap.min.css'"
- Where to apply my moment() function in a react component?
- Use a dynamic variable as a firebase element Reactjs
- React how to update another component's state?
- Using Morris.js with reactjs
- Get the ant-design Select dropdown value when hover
- Checkbox doesn't apply stylesheets on JavaScript checkbox check
- React / Next Render Issue, Client and Server Showing Different Data
- How to export config file to use in the same workspace - monorepo
- TS error: Type 'event' is missing the following properties from type 'keyboardevent'
- Upload multiple files and query Firestore DB - ReactJS
- stopping audio when switching pages with react router
- Using Grommet with ReactJS webpack and scss import Issue
- How to fade in element on scroll using React Hooks/React Spring
- React redux dispatch action to connect to mqtt
- React Node Modules conflict
- Facebook Developer API in reactjs code