3 回答

TA貢獻(xiàn)1813條經(jīng)驗 獲得超2個贊
在 Material v5 中你可以擴(kuò)展CommonColors
declare module "@mui/material/styles/createPalette" {
interface CommonColors {
layout: {
offBlack: string;
offWhite: string;
}
}
}
const colors = createTheme({
palette: {
common: {
layout: {
offBlack: "#14142B",
offWhite: "#FCFCFC",
},
},
},
});
// In a component
const useStyles = makeStyles((theme) => ({
target: {
backgroundColor: theme.palette.common.layout.offBlack
}
}));

TA貢獻(xiàn)1820條經(jīng)驗 獲得超9個贊
我認(rèn)為覆蓋使用您的ITheme類似內(nèi)容的東西會更方便,如下所示:
theme.d.ts
declare module "@material-ui/core/styles" {
export interface ITheme extends Theme {
palette: IPaletteOptions;
}
// Keep overriding these things in your app
// In this case returns `ITheme`
export function createMuiTheme(options?: ThemeOptions, ...args: object[]): ITheme;
// returns `ITheme`
export function useTheme<T = ITheme>(): T;
}
然后你不再需要在你的theme/index.ts:
export default createMuiTheme({ palette });
如果使用useTheme,它應(yīng)該ITheme按預(yù)期返回。
注意:我還更新了codesandbox:https://codesandbox.io/s/charming-pasteur-s6h8v ?file=/src/Component.tsx

TA貢獻(xiàn)1873條經(jīng)驗 獲得超9個贊
我通過使用這個來實現(xiàn)這個工作:
declare module '@material-ui/styles' {
export interface DefaultTheme extends CustomTheme {}
}
請注意,模塊中不包含“核心”。
我的完整代碼:
import theme from './theme';
type CustomTheme = {
palette: typeof theme;
};
declare module '@material-ui/styles' {
export interface DefaultTheme extends CustomTheme {}
}
添加回答
舉報