White lines appearing between color boxes, after adding a palette

[iainworkman]

This issue appears after completing lesson 213, but only under specific circumstances. The color boxes display correctly when the app initially loads - but once a new Palette is added white lines appear between color boxes in all contexts I can find:

This issue seems particular to two circumstances:

• Running with React.StrictMode (which is the current default with CRA), and
• The following dependencies:

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-color": "^2.19.3",
    "react-dom": "^17.0.1",
    "react-material-ui-form-validator": "^2.1.4",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/styles": "^4.11.3",
    "chroma-js": "^2.1.0",
    "rc-slider": "^9.7.1",
    "react-copy-to-clipboard": "^5.0.3",
    "react-router-dom": "^5.2.0"
  }

Note: If you pull the version stored here, and run npm install, then you will not see the issue, owing to the frozen dependency versions in the repo. You may encounter this issue if you work through the exercises.

If you are coming to this finding you are experiencing this issue, a workaround is to simply remove the <React.StrictMode> tags from index.js