html - 我应该如何使用 styled-component 解决这些样式问题

Question

我正在尝试制作一个投资组合网站作为练习。我不太擅长css，我从别人的代码中学习他们的设计和特效。

这是我到目前为止所取得的成就，我有一个小画廊来存储我的照片，并在单击它时使用照片放大器将其放大。通常当它没有被悬停或点击时，照片会被 filter: grayscale(50%) contrast(1); 降低饱和度。悬停时，饱和度恢复正常，照片下方有阴影。

这是演示:https://codesandbox.io/s/objective-swartz-tuo1t

相关的代码片段是

const Avatar = styled(SingleSource)`
  position: relative;
  mix-blend-mode: multiply;
  filter: grayscale(50%) contrast(1);
  transition: ${theme.transition};
`;

const AvatarContainer = styled.a`
  box-shadow: 0 10px 30px -15px ${colors.shadowNavy};
  transition: ${theme.transition};

  &:hover,
  &:focus {
    box-shadow: 0 20px 30px -15px ${colors.shadowNavy};
  }
  width: 100%;
  background: transparent;
  position: relative;
  margin-left: -20px;
  &:hover,
  &:focus {
    background: transparent;
    ${Avatar} {
      filter: none;
      mix-blend-mode: normal;
    }
  }

在这里< SingleSource />是每张照片的放大组件。

但是现在有几个问题。

1. 根本不应用去饱和效果。照片饱和度始终正常。

2. 所有照片周围都有白色填充物，类似于相框。我相信这与我应用的阴影样式有关。特别是这个片段

     box-shadow: 0 10px 30px -15px ${colors.shadowNavy};
     transition: ${theme.transition};
   
     &:hover,
     &:focus {
       box-shadow: 0 20px 30px -15px ${colors.shadowNavy};
     }   
   

3. 当您单击该区域时，图片容器周围会出现蓝色边框。我该如何删除它。

Answer 1

根据您的代码片段，这应该可以为您解决大纲问题。在 components/jobs.js 中，将 TabContent 的定义更新为如下所示:

const TabContent = styled.div`
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: ${props => (props.isActive ? 1 : 0)};
  z-index: ${props => (props.isActive ? 2 : -1)};
  position: ${props => (props.isActive ? "relative" : "absolute")};
  visibility: ${props => (props.isActive ? "visible" : "hidden")};
  transition: ${theme.transition};
  transition-duration: ${props => (props.isActive ? "0.5s" : "0s")};
  &:focus-within { // <--------- this is what was added
    outline: none;
  }
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: ${fontSizes.large};
    li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;
      &:before {
        content: "▹";
        position: absolute;
        left: 0;
        color: ${colors.green};
        line-height: ${fontSizes.xlarge};
      }
    }
  }
`;