扩展样式 material UI
extend style material UI
有没有办法在 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"
}
您可以为此使用 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"
}
};
};
有一个 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,但您可以添加该插件。
相关回答:
有没有办法在 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"
}
您可以为此使用 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"
}
};
};
有一个 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,但您可以添加该插件。
相关回答: