Fix a violation and ignore false positives

Author: michaldudak

packages/mui-styles/src/styled/styled.test.js

@@ -63,6 +63,8 @@ describe('styled', () => {
   });
 
   it('should filter some props', () => {
+    // false positive
+    // eslint-disable-next-line react/function-component-definition
     const style = (props) => ({
       background: props.color,
       borderRadius: 3,

packages/mui-styles/src/withStyles/withStyles.test.js

@@ -168,7 +168,10 @@ describe('withStyles', () => {
     });
 
     it('should use theme.props instead of defaultProps', () => {
-      const MuiFoo = ({ foo }) => foo;
+      function MuiFoo({ foo }) {
+        return foo;
+      }
+
       MuiFoo.defaultProps = {
         foo: 'foo',
       };

packages/mui-system/src/borders.js

@@ -67,6 +67,8 @@ export const borderLeftColor = style({
   themeKey: 'palette',
 });
 
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const borderRadius = (props) => {
   if (props.borderRadius !== undefined && props.borderRadius !== null) {
     const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');

packages/mui-system/src/breakpoints.js

@@ -51,6 +51,8 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) {
 }
 
 function breakpoints(styleFunction) {
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const newStyleFunction = (props) => {
     const theme = props.theme || {};
     const base = styleFunction(props);

packages/mui-system/src/compose.js

@@ -9,6 +9,8 @@ function compose(...styles) {
     return acc;
   }, {});
 
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = (props) => {
     return Object.keys(props).reduce((acc, prop) => {
       if (handlers[prop]) {

packages/mui-system/src/cssGrid.js

@@ -4,6 +4,8 @@ import { createUnaryUnit, getValue } from './spacing';
 import { handleBreakpoints } from './breakpoints';
 import responsivePropType from './responsivePropType';
 
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const gap = (props) => {
   if (props.gap !== undefined && props.gap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'gap');
@@ -20,6 +22,8 @@ gap.propTypes = process.env.NODE_ENV !== 'production' ? { gap: responsivePropTyp
 
 gap.filterProps = ['gap'];
 
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const columnGap = (props) => {
   if (props.columnGap !== undefined && props.columnGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'columnGap');
@@ -37,6 +41,8 @@ columnGap.propTypes =
 
 columnGap.filterProps = ['columnGap'];
 
+// false positive
+// eslint-disable-next-line react/function-component-definition
 export const rowGap = (props) => {
   if (props.rowGap !== undefined && props.rowGap !== null) {
     const transformer = createUnaryUnit(props.theme, 'spacing', 8, 'rowGap');

packages/mui-system/src/style.js

@@ -45,6 +45,8 @@ function getValue(themeMapping, transform, propValueFinal, userValue = propValue
 function style(options) {
   const { prop, cssProperty = options.prop, themeKey, transform } = options;
 
+  // false positive
+  // eslint-disable-next-line react/function-component-definition
   const fn = (props) => {
     if (props[prop] == null) {
       return null;