The type '(params: any) => CSSProperties' does not share any properties with the type 'Properties<string | number>'. Perhaps you meant to invoke it?

Why isn't this property working in react CSS when it is of type CSSProperties? How can I make it work with Properties<string | number>?

export const fields: GridFieldsConfiguration[] = [
    {
            ...defaultColDefs,
            field: 'amInitials',
            displayNameRule: 'Asset Manager',
            flex: 1.1,
            minWidth: 75,
            cellStyle: (params: any): any => {
              getCellStyle(params, 'amInactive')
            }
    
      }
];

const isDisabledbStyle = {
  color: '#FF0000'
};

const getCellStyle = ((params: any, inactiveCol: string): CSSProperties => {
  console.log(params);
  if (params?.api?.getValue(inactiveCol, params.node) === true) {
    return isDisabledbStyle;
  } else { 
  return isDisabledbStyle;
  }
}
);

These are the different types being used. The cellStyle property is based on CSSProperties, which extends CSS.Properties<string | number>.

export interface GridFieldConfiguration extends FieldConfiguration {
    cellStyle?: CSSProperties;
}

    export interface CSSProperties extends CSS.Properties<string | number> {
    /**
     * The index signature was removed to enable closed typing for style
     * using CSSType. You're able to use type assertion or module augmentation
     * to add properties or an index signature of your own.
     *
     * For examples and more information, visit:
     * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors
     */
    }

Here is the Properties interface:

export interface Properties<TLength = string | 0> extends StandardProperties<TLength>, VendorProperties<TLength>, ObsoleteProperties<TLength>, SvgProperties<TLength> {}

Answer №1

It appears that you are utilizing AG Grid and are attempting to set up a cellStyleFunc for the cellStyle option in column definitions?

As per the documentation provided, you can indeed specify a function that takes a params argument.

However, it seems like in your scenario, there is an intermediary GridFieldsConfiguration of a custom type that requires the cellStyle to be of type

Properties<string | number>
(which is likely actually React.CSSProperties), preventing the use of the function form, hence the error message.

If the remaining code handling GridFieldsConfiguration indeed expects CSSProperties and not the function form, then a refactor is necessary to accommodate it.

If its sole purpose is to pass the cellStyle option to AG Grid, then you should enhance the definition of the GridFieldsConfiguration type. You can leverage the existing types from AG Grid, for instance:

import { AgGridColumnProps as ColDef } from "ag-grid-react";

export interface GridFieldsConfiguration {
    cellStyle?: ColDef["cellStyle"];
}

Keep in mind that CSSProperties is not entirely type-compatible with cellStyle. To rectify this, remove the return type assertion from your getCellStyle function. If you wish to ensure that the returned objects still resemble a CSS object, you can utilize the new satisfies operator:

const isDisabledbStyle = {
    color: '#FF0000'
} satisfies CSSProperties;

const getCellStyle = (params: any, inactiveCol: string) => {
    return isDisabledbStyle;
};

Playground Link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fixed Position - Make width match the container's dimensions

I've been experimenting with setting a div's position to fixed once a user has scrolled a certain distance. I've run into an issue where the fixed position div's width doesn't match its parent element. How can I ensure that the fix ...

Utilizing React and MobX to dynamically render components based on observable arrays

I'm currently facing a challenge with trying to map an array in order to display components for each entry. Here's my current approach: Here is the structure of my RankStore; const RankStore = observable({ loading: false, error: "", ra ...

Ensure that the form is submitted only after confirming it in the modal with react-hook-form

**I am facing an issue with submitting react-hook-form on confirm in a modal component. Whenever the user selects confirm, I need the form to be submitted directly. I have tried writing the modal inside FormSubmitButton. Also, I have tried placing it insi ...

Ways to retrieve row and column data from a datagrid

Below is the code snippet I am currently working with: import React from 'react' import Button from '@material-ui/core/Button'; import Checkbox from '@material-ui/core/Checkbox'; import { DataGrid } from '@material-ui/da ...

What causes useEffect to be triggered multiple times, even when it is dependent on another useEffect function that is being executed repeatedly?

I have a specific requirement that involves using two useEffect hooks. First useEffect is used to set the latitude and longitude in the state with an empty dependency array. useEffect(() => { navigator.geolocation.getCurrentPosition(geo = ...

How can I subtract a value from my array in Angular?

I've been troubleshooting this problem for a while now and I'm hoping that someone here can assist me with finding a solution. The issue at hand involves an array object containing various values such as id, title, amountCounter. Specifically, t ...

Encountering the error "Unable to access the success property of an undefined object while

Currently, I am utilizing react toastr component which can be found at https://www.npmjs.com/package/react-toastr in my react-redux form setup. After installing it using npm install --save react-toastr and correctly importing the necessary components, eve ...

Looking for a shortcut in VSCode to quickly insert imports into existing import statements or easily add imports as needed on the go?

It seems that the current extensions available on the VSCode marketplace struggle to properly add Angular imports. For example, when I try to import OnInit using the Path IntelliSense extension: export class AppComponent implements OnInit It ends up impo ...

Angular2 data binding does not update when properties change

I'm struggling to establish the connection between the fields and the component in order for them to update when the properties change in OnDataUpdate(). The field "OtherValue" successfully binds two ways with the input field, and the "Name" field di ...

Have the validation state classes (such as .has-error) been removed from Bootstrap 5?

I've noticed that the validation state classes (.has-success, .has-warning, etc) seem to have been removed in bootstrap 5 as they are not working anymore and I can't find them in the bootstrap.css file. Before, I could easily use these classes w ...

Trouble reading property 'map' in a react-redux todo application

Greetings! I am currently in the process of developing a to-do list application, but I have encountered the following error: TypeError: Cannot read property 'map' of undefined Below is the code snippet where the error occurs: 4 | function T ...

Utilizing Higher Order Components (HOC) and the useSessionContext hook to address the flickering issue with Supabase Authentication redirection

I am currently integrating Supabase for authentication in my web application. An issue I have encountered is that when I am already logged in and attempt to access the login page for testing purposes, there is a brief display of the login page before being ...

How to Preserve Image Aspect Ratio within a Div Using the 'Overflow: Hidden' CSS Property

I am in the process of creating a profile page that takes inspiration from Facebook's layout design, particularly focusing on the banner and profile image combination. While my implementation looks good on desktop screens, I am facing challenges when ...

Storing the subscription value retrieved from an API in a global variable

I am trying to find a way to make the data retrieved from an API accessible as a global variable in Typescript. I know that using subscribe() prevents this, so I'm looking for a workaround. Here is the API code: getResultCount(category:any):Obs ...

Tips for adding labels to buttons in mui-datatables

I'm using mui-datatables in a React app and it's working well, but I want to add labels next to the sort and search buttons. Is there a way to do this? Thanks! https://i.stack.imgur.com/Fi1w0.png Here is my current options object: const options ...

I wish to remove every item except for the one belonging to the current user

I'm writing a function to delete all users except for the currently logged-in user. Take a look at my code: exports.deletealluser = async (req, res) => { try { const { sub } = req.user; const usersExceptCurrent = await User.fi ...

Tips for integrating tsconfig with webpack's provide plugin

In my project, I have a simple component that utilizes styled-components and references theme colors from my utils.tsx file. To avoid including React and styled-components in every component file, I load them through WebpackProvidePlugin. Everything works ...

Incorporating optional fields into the form builder without being mandatory

For my current project on Ionic 4, I have implemented a form builder to create and validate forms. I have also included the [disabled] attribute in the form to disable it if all fields are not valid. However, I noticed that even if I do not add Validators ...

The element 'mat-form-field' is unrecognized in Angular 9 and Material 9.2.0 version

Greetings! I am currently utilizing Angular 9 and here is the code snippet I am working with: The HTML component named "post-create.component.html": <mat-mat-form-field> <textarea rows="6" [(ngModel)]="enteredValue"></textarea> </ma ...

Getting the desired value from a CreatableSelect in React can be achieved by following these steps:

I have a form that includes a React library component called React Select. I'm struggling to retrieve the target value of this input field. Here's my code snippet: # CreatableSelect tag <CreatableSelect className={Astyle.selectInput} i ...