Answers for "adding two jss style in material ui styele"

2

adding two jss style in material ui styele

// Import the utility function above ^
import combineStyles from 'path/to/combineStyles'

// Now we can import contextual styles where we need them (preferred):
import buttonStyles from '/path/to/buttonStyle';
import componentStyles from '/path/to/componentStyle';

// We can use style functions that make use of the theme (example):
const s1 = theme => ({
  toolbar: {
    backgroundColor: theme.palette.primary.main,
    color: '#fff',
    ...theme.mixins.toolbar,
  },
  link: {
    color: theme.palette.primary.main,
    width: '100%',
    textDecoration: 'none',
    padding: '12px 16px',
  },
});

// And we can use style objects (example):
const s2 = {
  menuItem: {
    height: 'auto',
    padding: 0,
  },
};

// Use our util to create a compatible function for `withStyles`:
const combinedStyles = combineStyles(s1, s2, buttonStyles, componentStyles);

// And use `withStyles` as you would normally:
export default withStyles(combinedStyles)(MyComponent);
Posted by: Guest on February-04-2021
2

adding two jss style in material ui styele

function combineStyles(...styles) {
  return function CombineStyles(theme) {
    const outStyles = styles.map((arg) => {
      // Apply the "theme" object for style functions.
      if (typeof arg === 'function') {
        return arg(theme);
      }
      // Objects need no change.
      return arg;
    });

    return outStyles.reduce((acc, val) => Object.assign(acc, val));
  };
}

export default combineStyles;
Posted by: Guest on February-04-2021
1

create a common style material ui style

const styles = (theme) => ({
  cardContainer: {
    position: 'relative',
    width: '50%',
    padding: theme.spacing.unit / 2,
  },
  cardOuter: {
    height: '100%',
    width: '100%',
    textAlign: 'start',
  },
  card: {
    width: '100%',
    background: theme.palette.backgrounds.card.off,
  },
  cardOn: {
    background: theme.palette.backgrounds.card.on,
  },
  cardUnavailable: {
    background: theme.palette.backgrounds.card.disabled,
  },
  cardContent: {
    display: 'flex',
    flexWrap: 'wrap',
    minHeight: 98,
    height: 98,
    [theme.breakpoints.down('sm')]: {
      minHeight: 74,
      height: 74,
    },
    padding: `${theme.spacing.unit * 1.5}px !important`,
  },
});

export default styles;
Posted by: Guest on February-03-2021

Code answers related to "adding two jss style in material ui styele"

Code answers related to "Javascript"

Browse Popular Code Answers by Language