1

我正在尝试从 css 过渡到样式化组件。我正在创建一个拨动开关组件。当检查开关时，Active类上的动画起作用，但是当检查复选框时，开关不会像正常的CSS那样向左移动。

import React from 'react';
import styled from 'styled-components'

const Button = styled.span`
  content: '';
  position: absolute;
  top: 3.7px;
  left: 5px;
  width: 42px;
  height: 42px;
  border-radius: 45px;
  transition: 0.2s;
  background: #fff;
  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);
`;

const Label = styled.label`
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  width: 100px;
  height: 50px;
  background: dodgerblue;
  border-radius: 100px;
  position: relative;
  transition: background-color 0.2s;
  &:active ${Button} {
    width: 50px;
  }
`;

const Input = styled.input`
  height: 0;
  width: 0;
  visibility: hidden;
  &:checked ${Button} {
    left: calc(100% - 5px);
    transform: translateX(-100%);
  }
`;

const Switch = ({ isOn, handleToggle, onColor }) => {
  return (
    <>
      <Input
        checked={isOn}
        onChange={handleToggle}
        className='react-switch-checkbox'
        id={`react-switch-new`}
        type='checkbox'
      />
      <Label
        style={{ background: isOn && onColor }}
        className='react-switch-label'
        htmlFor={`react-switch-new`}>
        <Button className={`react-switch-button`} />
      </Label>
    </>
  );
};

export default Switch;
4

1 回答 1

2

您的问题与样式化组件无关。该规则&:checked ${Button} {假定Button是 的孩子Input，但它实际上是Input的兄弟姐妹的孩子Label。

将样式化组件规则更新为：

&:checked + ${Label} ${Button} {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

沙盒

于 2020-09-26T14:49:59.123 回答