第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

通過模塊增強(qiáng)擴(kuò)展 Material UI 主題無法正常工作

通過模塊增強(qiáng)擴(kuò)展 Material UI 主題無法正常工作

達(dá)令說 2023-08-18 16:18:19
我正在嘗試Theme使用 Material UI 進(jìn)行擴(kuò)展,但它拋出一個錯誤,說我沒有正確擴(kuò)展它,說,Property 'layout' is missing in type 'Palette' but required in type 'IPaletteOptions'.這是我所擁有的:// src/theme/theme.d.tsimport { Theme } from "@material-ui/core/styles";import {  IPaletteOptions,  PaletteOptions} from "@material-ui/core/styles/createPalette";type TLayout = {  primary: string;  secondary: string;};declare module "@material-ui/core/styles/createPalette" {  export interface IPaletteOptions extends PaletteOptions {    layout: TLayout;  }}declare module "@material-ui/core/styles" {  export interface ITheme extends Theme {    palette: IPaletteOptions;  }}// src/theme/index.tsimport { createMuiTheme, ITheme } from "@material-ui/core/styles";import { IPaletteOptions } from "@material-ui/core/styles/createPalette";export const palette = {  layout: {    primary: "#ffffff",    secondary: "#e4e4e4"  }} as IPaletteOptions;export default createMuiTheme({ palette }) as ITheme;// src/App.tsximport React from "react";import { ThemeProvider, ITheme } from "@material-ui/core";import theme from "./theme";import Component from "./Component";export default function App() {  return (    <ThemeProvider<ITheme> theme={theme}>      <Component />    </ThemeProvider>  );}import { useTheme } from "@material-ui/core";import React from "react";export default React.memo(() => {  const theme = useTheme(); // <-- this should be of type `ITheme` automatically                            // If I do useTheme<ITheme>(), it shows property 'layout', but                            // I shouldn't have to do that, because of the type casting that                            // I do in App.tsx, where I import and use 'theme' from src/theme/index.ts  return <div>the layout primary color is {theme.palette.layout.primary}</div>;});我在這里做錯了什么?我想在我的整個應(yīng)用程序中使用,除了我添加的內(nèi)容之外,ITheme這還將擴(kuò)展基本功能。Theme
查看完整描述

3 回答

?
慕姐8265434

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

  }

}));


查看完整回答
反對 回復(fù) 2023-08-18
?
慕妹3146593

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


查看完整回答
反對 回復(fù) 2023-08-18
?
眼眸繁星

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

}


查看完整回答
反對 回復(fù) 2023-08-18
  • 3 回答
  • 0 關(guān)注
  • 163 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號