如何使用 React+Typescript 有条件地内联样式组件？

Question

I have a an anchor component that I would like to style conditionally:

<a
  className="menu-item"
  role="button"
  href="/#"
  style={renderChangeColor}
>
  {changeStr}
</a>



const renderChangeColor = () => {
    let style = {};
    if (changeSign === POSITIVE) {
      style["color"] = "green";
    } else if (changeSign === NEGATIVE) {
      style["color"] = "red";
    } else {
      style["color"] = "white";
    }
    return style;
  };

However, when I try to compile, it throws an error:

TypeScript error in /Users/coinflex/coinflex/markets/src/components/Trade/MarketOverview/AssetSelector/AssetSelectorRow/AssetSelectorRow.tsx(32,7):
Element implicitly has an 'any' type because expression of type '"color"' can't be used to index type '{}'.
  Property 'color' does not exist on type '{}'.  TS7053

    30 |     let style = {};
    31 |     if (changeSign === POSITIVE) {
  > 32 |       style["color"] = "green";
       |       ^
    33 |     } else if (changeSign === NEGATIVE) {
    34 |       style["color"] = "red";
    35 |     } else {

Answer 1

you need to add a type to style, because otherwise, it is implicit any , and since your initial object isn't have a value, color is optional (for this reason I use ? )

 const renderChangeColor = () => { let style: { color?: string } = {}; // with the type, style isn't any. if (changeSign === POSITIVE) { style["color"] = "green"; } else if (changeSign === NEGATIVE) { style["color"] = "red"; } else { style["color"] = "white"; } return style; };

Answer 2

You will need to add types and call the function renderChangeColor (not just provide reference)

Style fix

const renderChangeColor = () => {
  let style:React.CSSProperties = {}; //<---------------- type fix
  if (changeSign === POSITIVE) {
    style["color"] = "green";
  } else if (changeSign === NEGATIVE) {
    style["color"] = "red";
  } else {
    style["color"] = "white";
  }
  return style;
};

Tsx fix

      <a
        className="menu-item"
        role="button"
        href="/#"
        style={renderChangeColor()} //<------------ call the function
      >
        {changeStr}
      </a>