Add classnames to Create and Edit buttons

Author: IAmVisco

packages/ra-ui-materialui/src/button/CreateButton.tsx

@@ -54,17 +54,17 @@ const CreateButton = (props: CreateButtonProps) => {
             {icon}
         </StyledFab>
     ) : (
-        <Button
+        <StyledButton
             component={Link}
             to={createPath({ resource, type: 'create' })}
             state={scrollStates[String(scrollToTop)]}
-            className={className}
+            className={clsx(CreateButtonClasses.root, className)}
             label={label}
             variant={variant}
             {...(rest as any)}
         >
             {icon}
-        </Button>
+        </StyledButton>
     );
 };
 
@@ -94,6 +94,7 @@ CreateButton.propTypes = {
 const PREFIX = 'RaCreateButton';
 
 export const CreateButtonClasses = {
+    root: `${PREFIX}-root`,
     floating: `${PREFIX}-floating`,
 };
 
@@ -113,6 +114,11 @@ const StyledFab = (styled(Fab, {
     },
 })) as unknown) as typeof Fab;
 
+const StyledButton = styled(Button, {
+    name: PREFIX,
+    overridesResolver: (_props, styles) => styles.root,
+})({});
+
 export default memo(CreateButton, (prevProps, nextProps) => {
     return (
         prevProps.resource === nextProps.resource &&

packages/ra-ui-materialui/src/button/EditButton.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
 import ContentCreate from '@mui/icons-material/Create';
 import { Link } from 'react-router-dom';
 import {
@@ -31,23 +33,25 @@ export const EditButton = <RecordType extends RaRecord = any>(
         icon = defaultIcon,
         label = 'ra.action.edit',
         scrollToTop = true,
+        className,
         ...rest
     } = props;
     const resource = useResourceContext(props);
     const record = useRecordContext(props);
     const createPath = useCreatePath();
     if (!record) return null;
     return (
-        <Button
+        <StyledButton
             component={Link}
             to={createPath({ type: 'edit', resource, id: record.id })}
             state={scrollStates[String(scrollToTop)]}
             label={label}
             onClick={stopPropagation}
+            className={clsx(EditButtonClasses.root, className)}
             {...(rest as any)}
         >
             {icon}
-        </Button>
+        </StyledButton>
     );
 };
 
@@ -81,3 +85,14 @@ EditButton.propTypes = {
     record: PropTypes.any,
     scrollToTop: PropTypes.bool,
 };
+
+const PREFIX = 'RaEditButton';
+
+export const EditButtonClasses = {
+    root: `${PREFIX}-root`,
+};
+
+const StyledButton = styled(Button, {
+    name: PREFIX,
+    overridesResolver: (_props, styles) => styles.root,
+})({});