El administrador de reacción pasa un nombre de clase al componente personalizado

Hola chicos, obtuve un Datagrid en un proyecto de administración de reacción con un botón personalizado, y dado que está en un datagrid, el botón está envuelto en una etiqueta td, ¿cómo puedo apuntar a este td envolviendo mi botón? Intenté darle un className pero es diciéndome que no puedo porque "type '{ className: string; }' no se puede asignar al tipo 'IntrinsicAttributes & CreateOrganizationButtonProps", ¿cómo reacciona la regla? ¿No puedo asignar un componente mío un nombre de clase? ¿Y cómo apuntar a este td especial creado por reaccionar admin?

 List,
 Datagrid,
 TextField,
 TopToolbar,
 CreateButton,
 ExportButton,
 TextInput,
 useRecordContext,
 useListController,
 ListContextProvider,
} from "react-admin";
import OrganizationsPanel from "./components/organizations-list-panel";
import CreateOrganizationButton from "./components/create-organization-button";
import { useEffect, useRef, useState } from "react";
const ListActions = () => (
 <TopToolbar>
 <CreateButton />
 <ExportButton />
 </TopToolbar>
);
const organizationsFilters = [<TextInput label="Search" source="q" alwaysOn />];
export const OrganizationsList = (props: any) => {
 return (
 <List
 className="custom-list"
 {...props}
 filters={organizationsFilters}
 filter={{ parentOrganizationId: localStorage.getItem("oid") }}
 sx={{
 "&.RaList-content": {
 boxShadow: "none",
 },
 }}
 actions={<ListActions />}
 >
 <Datagrid
 className="custom-list-grid"
 rowClick="edit"
 sx={{
 "&.RaDatagrid-row": {
 border: "none",
 width: "100%",
 },
 "&.RaDatagrid-row:hover.create-organization-button": {
 visibility: "inherit",
 },
 "&.RaDatagrid-row.create-organization-button": {
 visibility: "inherit",
 },
 }}
 bulkActionButtons={false}
 expand={<OrganizationsPanel />}
 >
 <TextField source="name" />
 <CreateOrganizationButton className='salut'/>
 </Datagrid>
 </List>
 );
};

import React, { useState } from "react";
import { IconButton } from "@mui/material";
import { Link } from "react-router-dom";
import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
import { useRecordContext } from "react-admin";
const CreateOrganizationButton: React.FC<CreateOrganizationButtonProps> =
 () => {
 const record = useRecordContext();
 return (
 <IconButton
 className="create-organization-button"
 component={Link}
 to={{
 pathname: "/organizations/create",
 search: `?source=${JSON.stringify({
 parentOrganizationId: record.id,
 })}`,
 }}
 sx={{
 position: "relative",
 top: 0,
 }}
 onClick={(event: any) => event.stopPropagation()}
 >
 <AddCircleOutlineIcon color="primary" />
 </IconButton>
 );
 };
interface CreateOrganizationButtonProps {}
export default CreateOrganizationButton;

Solución del problema

En su CreateOrganizationButtoncomponente, ha definido qué accesorios se espera que se pasen.

const CreateOrganizationButton: React.FC<CreateOrganizationButtonProps>

La línea de arriba significa que CreateOrganizationButtones de tipo React.FCy espera recibir CreateOrganizationButtonProps.

You've defined CreateOrganizationButtonProps as:

interface CreateOrganizationButtonProps {}

La línea anterior significa CreateOrganizationButtonPropsque se espera que sea un objeto vacío. Probablemente quieras cambiarlo a algo como esto:

interface CreateOrganizationButtonProps {
 className: string;
}

Ahora deberías dejar de recibir el error que estabas viendo. Pero hay un paso más para hacer que el classNameque está pasando haga algo.

Querrás usar el classNameque estás pasando de alguna manera.

Primero queremos obtener el classNamedesde el propsen CreateOrganizationButton. Puedes hacerlo usando la desestructuración de accesorios:

const CreateOrganizationButton: React.FC<CreateOrganizationButtonProps> =
 ({ className }) => {
...

Actualmente, el <IconButton>interior de su CreateOrganizationButtonya tiene una classNamede "create-organization-button". Puede cambiar esto a lo classNameque está pasando para usarlo en su lugar:

 <IconButton
 className={className}
...