Repository: facebook/react
File: packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js (JavaScript)

Code before:
        rel="noopener noreferrer"
        target="_blank"
        title="This component is not running in StrictMode. Click to learn more.">
        <Icon type="strict-mode-non-compliant" />
      </a>
    );
  }

  return (
    <div className={styles.InspectedElement}>
      <div className={styles.TitleRow} data-testname="InspectedElement-Title">
        {strictModeBadge}

        {element.key && (
          <>
            <div className={styles.Key} title={`key "${element.key}"`}>
              {element.key}
            </div>
            <div className={styles.KeyArrow} />
          </>
        )}

        <div className={styles.SelectedComponentName}>
          <div
            className={
              element.isStrictModeNonCompliant ? undefined : styles.Component
            }
            title={element.displayName}>
            {element.displayName}
          </div>
        </div>
        {canOpenInEditor && (
          <Button onClick={onOpenInEditor} title="Open in editor">
            <ButtonIcon type="editor" />
          </Button>
        )}
        {canToggleError && (
          <Toggle
            isChecked={isErrored}
            onChange={toggleErrored}
            title={
              isErrored
                ? 'Clear the forced error'
                : 'Force the selected component into an errored state'
            }>
            <ButtonIcon type="error" />
          </Toggle>
        )}
        {canToggleSuspense && (
          <Toggle
            isChecked={isSuspended}

Review comment (suggestion):
I believe there was a typo in https://github.com/facebook/react/pull/22886

so the right fix would be:
```suggestion
              element.isStrictModeNonCompliant ? styles.StrictModeNonCompliant : styles.Component
```

could you please update and verify that?

Other changes are fine, maybe we should explore supporting this eslint rule for `react-devtools-*` packages.

Code after:
        rel="noopener noreferrer"
        target="_blank"
        title="This component is not running in StrictMode. Click to learn more.">
        <Icon type="strict-mode-non-compliant" />
      </a>
    );
  }

  return (
    <div className={styles.InspectedElement}>
      <div className={styles.TitleRow} data-testname="InspectedElement-Title">
        {strictModeBadge}

        {element.key && (
          <>
            <div className={styles.Key} title={`key "${element.key}"`}>
              {element.key}
            </div>
            <div className={styles.KeyArrow} />
          </>
        )}

        <div className={styles.SelectedComponentName}>
          <div
            className={
              element.isStrictModeNonCompliant
                ? styles.StrictModeNonCompliant
                : styles.Component
            }
            title={element.displayName}>
            {element.displayName}
          </div>
        </div>
        {canOpenInEditor && (
          <Button onClick={onOpenInEditor} title="Open in editor">
            <ButtonIcon type="editor" />
          </Button>
        )}
        {canToggleError && (
          <Toggle
            isChecked={isErrored}
            onChange={toggleErrored}
            title={
              isErrored
                ? 'Clear the forced error'
                : 'Force the selected component into an errored state'
            }>
            <ButtonIcon type="error" />
          </Toggle>
        )}
        {canToggleSuspense && (