CODEWITHSUNDEEP
reactjsmaterial-uijss
Mina Fawzy
Mina Fawzy

Reputation: 21452

extend style material UI

is there way to extend style on reactjs I tried extend style but its dosent work 

cellItem:{
 color: "black",
    fontWeight: "bold",
    [theme.breakpoints.down("xs")]: {
      fontSize: "0.8em"
    },
},

tableCellItem: {
   extend:"cellItem", --> here I extend parent style
    fontSize: "1.5em"
  },
  tableCellItemInSingleScreen: {
      extend:"cellItem",--> here I extend parent style
    fontSize: "2.5em"
  }

Upvotes: 1

Views: 86

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80996

You can just use JavaScript features for this:

const styles = theme => {
  const cellItem = {
    color: "black",
    fontWeight: "bold",
    [theme.breakpoints.down("xs")]: {
      fontSize: "0.8em"
    }
  };
  return {
    cellItem,
    tableCellItem: {
      ...cellItem,
      fontSize: "1.5em"
    },
    tableCellItemInSingleScreen: {
      ...cellItem,
      fontSize: "2.5em"
    }
  };
};

There is an extend plugin within JSS that would cause your syntax to work, but it is not one of the plugins included within Material-UI by default, but you can add that plugin.

Related answer: Advanced styling in material-ui

Upvotes: 1

Related Questions