חשבתם פעם מה קורה כשמגדירים גם background וגם background-color ב inline style על קומפוננטה? נו, גם אני לא. עד שנתקלתי בבאג מוזר שדברים פתאום איבדו עיצוב. קודפן להמחשה:

https://codepen.io/ynonp/pen/jOoqKGx

וזה הקוד:

import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
const baseStyle = { backgroundColor: 'blue', color: 'white', width: '100%' };

const App = () => {
  const [clicked, setClicked] = React.useState(false);
  const style = clicked
    ? Object.assign({}, baseStyle, { background: 'red' })
    : baseStyle;

  return(
    <div className="box"
      style={style}
      onClick={() => {
        setClicked(v => !v);
      }}
     >
       {JSON.stringify([style, clicked])}
     </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))

לפי הקוד הריבוע מתחיל עם צבע כחול, לחיצה הופכת את הצבע לאדום והלחיצה הבאה תחזיר את העיצוב למה שהיה בהתחלה כלומר תחזיר את הצבע לכחול.

אלא שזה לא מה שריאקט רואה.

מבחינת ריאקט אחרי שהגדרתי background על האלמנט באוביקט ה style ואז מחקתי משם את ה background, ה background-color שהיה שם קודם מפסיק לעבוד ואנחנו רואים שהקופסה הופכת לבנה. עוד לחיצות לא יהפכו אותה יותר לכחולה שוב.

כמו תמיד אפשר לתקן את זה עם key שונה לשני המצבים, אבל זה לא מה שרצינו שם. ה Takeaway המרכזי כאן הוא לשים לב לא לערבב background עם background-color, ובכל מקרה עדיף להשתמש ב tailwind ולא להיכנס לפינות האלה.