diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js
index f95f2d15fc812b..f28ce9b43c832e 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.js
@@ -46,6 +46,7 @@ const InputLabelRoot = styled(FormLabel, {
ownerState.size === 'small' && styles.sizeSmall,
ownerState.shrink && styles.shrink,
!ownerState.disableAnimation && styles.animated,
+ ownerState.focused && styles.focused,
styles[ownerState.variant],
];
},
@@ -141,7 +142,7 @@ const InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
const fcs = formControlState({
props,
muiFormControl,
- states: ['size', 'variant', 'required'],
+ states: ['size', 'variant', 'required', 'focused'],
});
const ownerState = {
@@ -152,6 +153,7 @@ const InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
size: fcs.size,
variant: fcs.variant,
required: fcs.required,
+ focused: fcs.focused,
};
const classes = useUtilityClasses(ownerState);
diff --git a/packages/mui-material/src/InputLabel/InputLabel.test.js b/packages/mui-material/src/InputLabel/InputLabel.test.js
index 1a1b2a7e038f7c..76a4d338e2e352 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.test.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.test.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { expect } from 'chai';
import { describeConformance, act, createRenderer } from '@mui-internal/test-utils';
import { ClassNames } from '@emotion/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
import FormControl from '@mui/material/FormControl';
import Input from '@mui/material/Input';
import FormLabel from '@mui/material/FormLabel';
@@ -118,6 +119,36 @@ describe('', () => {
setProps({ shrink: true });
expect(getByTestId('root')).to.have.class(classes.shrink);
});
+
+ it('provides ownerState.focused in styleOverrides', () => {
+ const theme = createTheme({
+ components: {
+ MuiInputLabel: {
+ styleOverrides: {
+ root: (props) => {
+ return {
+ ...(props.ownerState.focused === true && {
+ fontWeight: '700',
+ }),
+ };
+ },
+ },
+ },
+ },
+ });
+
+ const { getByText } = render(
+
+
+ Bold Test Label
+
+ ,
+ );
+
+ const label = getByText('Bold Test Label');
+
+ expect(getComputedStyle(label).fontWeight).to.equal('700');
+ });
});
});