Question

有没有办法在reactjs上扩展样式我尝试了扩展样式，但效果显着

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

Answer 1

您可以为此使用JavaScript功能：

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"
    }
  };
};

JSS中有一个extend plugin可以使您的语法正常工作，但是它不是插件included within Material-UI by default之一，但是您可以添加该插件。

扩展样式素材UI

1 个答案: