如何使用样式的组件和ReactJ添加自定义CSS？警告：因非树立属性而被收到false

Question

我喜欢根据道具添加样式。

import   {ArrowBackIcon} from './styles';

const App = () => {
...

  const isFirstImageAttachment = (index) => {
    return (
      filteredImages.length &&
      filteredImages[0]?.uuid === attachments[index]?.uuid
    );
  };

...

  return (
    <div className="App">
     ...

      <ArrowBackIcon
        isfirstimageattachment={isFirstImageAttachment(idx)}
        onClick={clickBackAttachment}
      />

      ...
    </div>
  );
};

)

styles.js

export const ArrowForwardIcon = styled(ForwardArrowIcon)`
  ...
  display: ${props => (props.isfirstimageattachment ? 'none' : 'block')}; ;
`;

isfirstimageattachment应该返回true或false，因此取决于我喜欢隐藏或显示arrowforwardicon >组件。

我会遇到一个错误，说警告：非先进属性的false isfirstimageattachment。如果您想将其写入DOM，请改用一个字符串：IsfirstimageatTachment =“ false”或isfirstimagageattachment = {value.toString（value.toString（value.tostring（value.tostring）） ）}

我不想做isfirstimageattachment =“ false”，因为isfirstimageattachment并不总是返回false。另外，此函数不会返回字符串 so isfirstimageatTachment = {value.tostring（）}}不按我想要的方式工作。

我能做什么？

我发现的尝试

是，即使我传递了字符串false样式没有改变。

  return (
    <div className="App">
     ...

      <ArrowBackIcon
        isfirstimageattachment="false"
        onClick={clickBackAttachment}
      />

      ...
    </div>

我看到元素被应用了显示：无; 这不是将道具提供给样式组件的方式吗？

Answer 1

import   {ArrowBackIcon} from './styles';

const App = () => {
...

  const isFirstImageAttachment = (index) => {
     const showEl = filteredImages.length &&
      filteredImages[0]?.uuid === attachments[index]?.uuid;
     return showEl ? 'hidden' : 'visible';
  };

...

  return (
    <div className="App">
     ...

      <ArrowBackIcon
        isfirstimageattachment={isFirstImageAttachment(idx)}
      />

      ...
    </div>
  );
};

)

styles.js

export const ArrowBackIcon = styled(BackArrowIcon)`
  visibility: ${props => props.isfirstimageattachment};
`;

我能够以这种方式动态添加样式！