时间戳

首页 > 解决方案 > 我应该如何使用 styled-component 解决这些样式问题

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

问题描述

我正在尝试制作一个投资组合网站作为练习。我不是很擅长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. 单击该区域时，图片容器周围有一个蓝色边框。我怎样才能删除这个。 在此处输入图像描述

标签： htmlcssreactjsfrontendstyled-components

解决方案

根据您的代码片段，这应该可以为您解决大纲问题。在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};
      }
    }
  }
`;

推荐阅读