首页 > 解决方案 > 样式组件扩展样式与共享样式不起作用

问题描述

我正在尝试使用 styled-components 扩展样式,但在仅部署中添加属性后无法正常工作。在开发中,这是完美的工作。

Chrome 和 Safari 的部署都没有改变。即使在开发人员工具中也找不到这些属性。硬刷新是没用的。

请告诉我我错过了什么。

// Logos.ts
const CommonStyle = css`
  width: 100px;
  min-width: 50px;
  height: 100px;
  min-height: 50px;
  radius-border: 7px;
  border: solid 1px #yellow;
`;

const DefaultLogo = styled(CommonSvg.DefaultIcon)`
  ${CommonStyle};
`;

const ProfileLogo = styled.img`
  ${CommonStyle};
  object-fit: contain; // Added here. disappear...
`;
// Profile.tsx

const Wrapper = styled.div`
  width: 200px;
  height: 200px;
  border-radius: 7px;
  background-color: #FFF; // Added here. disappear too...
`;

const Profile = () => {
  (...omission)

  return (
    <Wrapper>
      {
        imgUrl
        ? <ProfileLogo src={imgUrl} alt="profile" />
        : <DefaultLogo /> 
      }
    <Wrapper>
  )
};

标签: styled-components

解决方案


推荐阅读