如何在React组件中设置绝对定位

Question

我正在尝试为我的投资组合创建一个自定义按钮。

此按钮将变为动画，将鼠标悬停在顶部时，顶部从左向右滑动。

链接到该按钮的中心是类别。

以下为插图：

如何将我要创建的每个文本设置在中心？我不能使用“ position：absolute”属性，因为引用将是网页，而不是声明自定义组件的位置...

这是我的实际代码：

CSS

  const CatStyle = styled.div`
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.75);
  height: 50px;
  max-width: 150px;
  background-color: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
  transition : background-color 0.5s ease-out;

:hover div{
  display: flex;
}

.catContent {
  position: relative;
  align-self: center;
  font-size: 1.5rem;
}
.topSlideAnimation {
  display: none
  height: 50%;
  background-color: green;
}
.botSlideAnimation {
  transition : background-color 0.5s ease-out;
  display: none;
  height: 50%;
  background-color: blue;
}

`

JSX

const ButtonCat = (props) => (
  <CatStyle>
      <div className="topSlideAnimation"></div>
      <div className="catContent">Hello</div>
      <div className="botSlideAnimation"></div>
  </CatStyle>
)

Answer 1

没有完成任何jsx，因此不确定您的catstyle标记将呈现什么，但是如果您只能呈现一个按钮（或div），我将执行以下操作

• 制作一个可弯曲的外部容器（用于在中心对齐文本）
• 为文本创建一个内部容器（因此您可以相对放置文本容器并为其添加z-index）
• 将伪元素添加到外部容器中以获取动画位（而不是具有2个空div）

* {
  box-sizing: border-box;
}

.button {
  display: inline-flex;    /* make flex for centring */
  justify-content: center; /* vertically centre */
  align-items: center;     /* horizontally centre */
  position: relative;      /* for adding absolute positioned children */
  min-height: 50px;         /* test value to show text is centred */
  overflow: hidden;        /* hide pseudo elements when not shown */
}

.button:before,
.button:after {
  content: '';             /* make coloured animatable bits */
  display: block;
  height: 50%;
  width: 100%;
  position: absolute;
  transition: all 1s ease-in;
  z-index: 1;
}

.button:before {
  top: 0;
  right: 100%;
  background: grey;
}

.button:hover:before {
  right: 0;
}

.button:after {
  top: 50%;
  left: 100%;
  background: darkgrey;
}

.button:hover:after {
  left: 0;
}

.text { 
  position: relative;  /* needs to have a higher z-index than the pseduo elements so text  appears on top */
  z-index: 2;
}

<button class="button"><span class="text">test content</span></button>