I created my own custom theme and I'm trying to assing one of the colors I created to a button, but when I'm trying to set it as:
color={theme.pallete.lightGrey}
I'm getting this error:
No overload matches this call
Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Pick<...> & CommonProps & Pick<...>): Element', gave the following error.
Does this means that you can't assign custom colors to the color attribute? Only through styling
If you are using typescript use the global theme approach
in this case,
I have 2 custom colours which are neutral and backgroundSecondary so you need to register the types in material UI types
declare module "#mui/material/styles" {
interface CustomPalette {
neutral: {
main: string;
contrastText: string;
};
backgroundSecondary: string;
}
interface Palette extends CustomPalette {}
interface PaletteOptions extends CustomPalette {}
}
Then register that button show be able to read the custom colors
In my case I only need neutral to be read by the Button component so you do this
declare module "#mui/material/Button" {
interface ButtonPropsColorOverrides {
neutral: true;
}
}
You set up your theme (in most cases this would have already been setup)
let theme = createTheme({
palette: {
primary: {
main: "some-color",
},
secondary: {
main: "some-color",
},
error: {
main: "some-color",
},
neutral: {
main: "#fff",
contrastText: "#002255",
},
backgroundSecondary: "#f8fafc",
},
});
Finally the usage
<Button variant="outlined" color="neutral"> Click Me</Button>
Related
I've been reading the MUI documentation, blogs, and other posts on Stackoverflow, yet despite all of that, I can't get my vscode intellisense/typescript to detect my changes.
They're very simple changes, quite similar to what many other examples show, yet nothing.
Could use some help.
mui docs
resource
// theme.ts
export const getDesignTokens = (mode: PaletteMode) => ({
palette: {
mode,
...(mode === "light"
? {
// palette values for light mode
primary: {
light: "#FF7988",
main: "#FE5366",
dark: "#E04052",
},
text: {
primary: "#212121",
secondary: "#616161",
},
background: {
default: "#ffffff",
},
border: {
light: "#EFEFEF",
main: "#D9D9D9",
dark: "#979797",
},
}
: {
// future dark values
}),
...
// theme.d.ts
declare module "#mui/material/styles" {
// allow configuration using `createTheme`
interface PaletteOptions {
border?: {
light: string;
main: string;
dark: string;
};
}
interface Palette {
border: {
light: string;
main: string;
dark: string;
};
}
}
doesn't show the new border property
I had to add the import path to the module at the top of the script and that made things work. Not sure why I had to do this, i didnt notice it elsewhere, but it seems to work.
import "#mui/material"; <--
declare module "#mui/material/styles" {
// allow configuration using `createTheme`
interface PaletteOptions {
border?: {
light: string;
main: string;
dark: string;
};
}
interface Palette {
border: {
light: string;
main: string;
dark: string;
};
}
}
I have a monorepo that contains a design-system made with styled components. In this design system I have a Heading component that takes a 'level' prop to adjust the CSS of the heading.
Heading
export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
}
export const Heading: React.FC<HeadingProps> = ({ level = '1', children, ...rest }) => {
return (
<HeadingStyled level={level} {...rest}>
{children}
</HeadingStyled>
)
}
Usage
To use this Heading component I simply pass a level to it for the styling and the as prop to adjust what HTML is rendered.
<Heading as="h2" level="2">
Header 2
</Heading>
Problem
When I use this component I get a typescript error on the as prop
Type '{ children: string; as: string; level: "2"; }' is not assignable to type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.
Property 'as' does not exist on type 'IntrinsicAttributes & HeadingProps & { children?: ReactNode; }'.
I have tried:
export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
level: 'colossus' | 'uber' | 'hero' | '1' | '2' | '3' | '4' | '5'
as?: React.Element | JSX.Element | JSX.IntrinsicElements
}
You're close! JSX.IntrinsicElements is an interface whose keys are the labels of the HTML tags. It itself is not a union of all HTML tags.
That means that all you need to do is
interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
// ...
as?: keyof JSX.IntrinsicElements // Note the keyof!
}
Now as's signature is shown by TS as:
(JSX attribute) HeadingProps.as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 156 more ... | undefined
Which means your code will now work exactly as expected
<Heading as="h2" level="2"> // No TS errors! ✅
Header 2
</Heading>
TS playground link
in completion to #Aron's answer , this code working for me (styled-component + styled-system)
{ as?: ComponentType<any> | keyof JSX.IntrinsicElements | string | undefined }
I'm trying to create a BaseModel from which all my models are inherited.
I'm also trying to create a separate method() function that can get any of my models as argument.
This is my example code:
import {
Model, Optional
} from 'sequelize'; // v6.3.5
interface DefaultAttributes {
id: number;
}
interface TestAttributes extends DefaultAttributes {
field: number;
}
class BaseModel<T extends DefaultAttributes> extends Model<T, Optional<T, 'id'>> {
static test() {
}
}
class MyModel extends BaseModel<TestAttributes> {
}
function method<T extends typeof BaseModel>(model: T) {
model.test();
}
method(MyModel) // <<<<<< TypeScript ERROR
I've tried to do everything just as the documentation described. https://sequelize.org/master/manual/typescript.html
I'm getting the following TypeScript error:
TS2345: Argument of type 'typeof MyModel' is not assignable to parameter of type 'typeof BaseModel'. Types of parameters 'values' and 'values' are incompatible. Type 'Optional<T, "id">' is not assignable to type 'Optional<TestAttributes, "id">'. Property 'field' is missing in type 'Optional<T, "id">' but required in type 'Pick<TestAttributes, "field">'.
Can pls someone help me what did I do wrong, or how can I create a method that can receive any UniqueModel inherited from BaseModel?
Try this:
import {
Model, Optional
} from 'sequelize'; // v6.3.5
interface DefaultAttributes {
id: number;
}
interface TestAttributes extends DefaultAttributes {
field: number;
}
class BaseModel<T extends DefaultAttributes> extends Model<T, Optional<T, 'id'>> {
static test() {
}
}
class MyModel extends BaseModel<TestAttributes> {
}
function method<T extends BaseModel>(model: T) {
model.test();
}
method(MyModel)
I am currently using a redux pattern in a create-react-app with typescript.
Currently i am having an issue deciphering the overload error messages.
The current fix works but i dont think its correct as it wont be strictly typed anymore.
const combinedReducers = combineReducers({ reducer1, reducer2 } as any);
Overload Error message:
No overload matches this call.
Overload 1 of 3, '(reducers: ReducersMapObject<ApplicationState, any>): Reducer<CombinedState<ApplicationState>, AnyAction>', gave the following error.
Type '(state: ModelState | undefined, action: any) => { model: any; loading: boolean; errorMessage: string; } | { loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'Reducer<ModelState, any>'.
Type '{ model: any; loading: boolean; errorMessage: string; } | { loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'ModelState'.
Type '{ loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'ModelState'.
Types of property 'model' are incompatible.
Type 'never[]' is missing the following properties from type 'Model': opportunity_id, model_result TS2769
24 | save_opportunity_state: SaveOpportunityReducer,
25 | archive_state: ArchiveOpportunityReducer,
> 26 | model_state: GetModelReducer,
| ^
27 | });
28 |
Reducer:
export interface ModelState {
model: Model;
loading: boolean;
errorMessage: string;
}
export interface Model {
opportunity_id: string;
model_result: ModelResult;
}
export interface ModelResult {
model_info: ModelInfo;
qualification: Qualification;
similar_deals?: null[] | null;
tool_tips: ToolTips;
top_actions?: null[] | null;
win_probability: WinProbability;
}
export interface ModelInfo {
probability_version: string;
similar_deals_version: string;
}
export interface Qualification {
colour: string;
score: number;
}
export interface ToolTips {
[key: string]: string;
}
export interface WinProbability {
colour: string;
features?: null[] | null;
score: number;
}
const initialState: ModelState = {
model: {
opportunity_id: '',
model_result: {
model_info: { probability_version: '', similar_deals_version: '' },
qualification: { colour: 'grey', score: 0 },
similar_deals: [],
tool_tips: {},
top_actions: [],
win_probability: { colour: 'green', features: [], score: 0 },
},
},
loading: false,
errorMessage: '',
};
If you look at the error message, specifically the last one states that model is missing following property.
I am guessing your failure case just returns an empty object. This contradicts the types defined above as the model should always contain x, y and z.
So in your failure case, you should add the following:
model: { ...initialState.model },
I have to pass a flag in my Dialog Component. It must be like this
this.dialogService.addDialog(ModalDialogComponent, { title: 'History', message: this.comments, isHistoryModel:true});
My ModalDialogComponent:
export class ModalDialogComponent extends DialogComponent < ModalDialogModel, null > implements ModalDialogModel {
title: string;
message: any;
isHistoryModel: boolean;
constructor(dialogService: DialogService) {
super(dialogService);
}
}
Error snapshot:
You have to add
isHistoryModel:boolean
into your
ModalDialogModel