オブジェクトのキーではなく、ラベルと認識される件について

結論：アロー関数は戻り値がObjectの時に()が必要

エラー内容

'color:' is defined but never used.eslintno-unused-labels
Unexpected labeled statement.eslintno-labels

原因

オブジェクトと認識されず、ただ文字列が評価されている

import './App.css';

const contentPinkStyle = () => {
    //文字列としては評価されているが、オブジェクトと認識されていない
    color: "pink",
    fontSize: "20px"
};

function App() {
  return (
    <>
      <p style={contentPinkStyle()}>しみともです</p>
    </>
  );
}

export default App;

解決策

{}をオブジェクトだと認識されることが必要

const contentPinkStyle = () => {
  return {
    color: "pink",
    fontSize: "20px"
  };
};

//もしくは

const contentPinkStyle = () => ({
    color: "pink",
    fontSize: "20px"
});

参考記事
https://jsnotice.com/posts/2019-06-06/

しかし！単純にオブジェクトを変数として定義すればよかった

const contentPinkStyle = {
  color: "pink",
  fontSize: "20px"
};

function App() {
  return (
    <>
      <p style={contentPinkStyle}>しみともです</p>
    </>
  );
}