[TablePagination] Fix select variant not working (#33974)

* add test cases

* apply Select variant if provided

* do not attach variant as an attribute to select root div

* update test

* test: parentNode -> parentElement

* fix visual regressions by allowing variant in inputProps

* add back variant standard

* add comment

packages/mui-material/src/Select/Select.js

@@ -114,7 +114,8 @@ const Select = React.forwardRef(function Select(inProps, ref) {
     ...(multiple && native && variant === 'outlined' ? { notched: true } : {}),
     ref: inputComponentRef,
     className: clsx(InputComponent.props.className, className),
-    variant,
+    // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
+    ...(!input && { variant }),
     ...other,
   });
 });

packages/mui-material/src/TablePagination/TablePagination.js

@@ -199,7 +199,7 @@ const TablePagination = React.forwardRef(function TablePagination(inProps, ref)
         {rowsPerPageOptions.length > 1 && (
           <TablePaginationSelect
             variant="standard"
-            input={<InputBase />}
+            {...(!SelectProps.variant && { input: <InputBase /> })}
             value={rowsPerPage}
             onChange={onRowsPerPageChange}
             id={selectId}

packages/mui-material/src/TablePagination/TablePagination.test.js

@@ -7,6 +7,9 @@ import TableFooter from '@mui/material/TableFooter';
 import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import TablePagination, { tablePaginationClasses as classes } from '@mui/material/TablePagination';
+import { inputClasses } from '@mui/material/Input';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { filledInputClasses } from '@mui/material/FilledInput';
 
 describe('<TablePagination />', () => {
   const noop = () => {};
@@ -399,6 +402,38 @@ describe('<TablePagination />', () => {
       const [combobox] = getAllByRole('button');
       expect(combobox).toHaveAccessibleName('Rows per page: 10');
     });
+
+    ['standard', 'outlined', 'filled'].forEach((variant) => {
+      it(`should be able to apply the ${variant} variant to select`, () => {
+        const { getAllByRole } = render(
+          <table>
+            <TableFooter>
+              <TableRow>
+                <TablePagination
+                  count={1}
+                  page={0}
+                  onPageChange={noop}
+                  onRowsPerPageChange={noop}
+                  rowsPerPage={10}
+                  SelectProps={{ variant }}
+                />
+              </TableRow>
+            </TableFooter>
+          </table>,
+        );
+
+        const [combobox] = getAllByRole('button');
+        const comboboxContainer = combobox.parentElement;
+
+        if (variant === 'standard') {
+          expect(comboboxContainer).to.have.class(inputClasses.root);
+        } else if (variant === 'outlined') {
+          expect(comboboxContainer).to.have.class(outlinedInputClasses.root);
+        } else if (variant === 'filled') {
+          expect(comboboxContainer).to.have.class(filledInputClasses.root);
+        }
+      });
+    });
   });
 
   describe('prop: rowsPerPage', () => {
@@ -447,4 +482,26 @@ describe('<TablePagination />', () => {
       );
     });
   });
+
+  it('should not have "variant" attribute on TablePaginationSelect', () => {
+    const { getAllByRole } = render(
+      <table>
+        <TableFooter>
+          <TableRow>
+            <TablePagination
+              count={1}
+              page={0}
+              onPageChange={noop}
+              onRowsPerPageChange={noop}
+              rowsPerPage={10}
+            />
+          </TableRow>
+        </TableFooter>
+      </table>,
+    );
+
+    const [combobox] = getAllByRole('button');
+
+    expect(combobox.parentElement).not.to.have.attribute('variant');
+  });
 });