javascript - react 单选按钮 : checked cycle not aligned

Question

我尝试转换 this样式组件的单选按钮。

您可以看到检查的周期已关闭。

App.js

import React, {useState} from "react";
import RadioButton from './RadioButton';

// https://codepen.io/satya164/pen/qdgYaO
function App() {
  const [value, setValue] = useState('');

  //test
  console.log('value', value);

  return <div className="App">
    <RadioButton 
      checked={value === 'test1' ? true : false}
      onChange={() => {setValue('test1')}}
      value={'test1'}
      name={'test'}
      label={'test radio1'}
    ></RadioButton>

    <RadioButton 
      checked={value === 'test2' ? true : false}
      onChange={() => {setValue('test2')}}
      value={'test2'}
      name={'test'}
      label={'test radio2'}
    ></RadioButton>
  </div>;
}

export default App;

单选按钮.js

import React from "react";
import {Label, Span, Input} from './index.style';

const RadioButton = ({checked, value, name, onChange, label}) => {

  return (
    <div>
      <Label>
        <Input
          type="radio"
          checked={checked}
          value={value}
          name={name}
          onChange={onChange}
        />
        <Span>{label}</Span>
      </Label>
    </div>
  );

}

export default RadioButton;

样式.js

import styled from 'styled-components';

export const Label = styled.label`
  display: block;
  //padding: .5em;
  cursor: pointer;
`;

export const Span = styled.span`
  &:before {
    content: "";
    display: inline-block;
    vertical-align: -.25em;
    height: 1em;
    width: 1em;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.5);
    //margin-right: .5em;
  }
`;

export const Input = styled.input`
  &:checked + ${Span} {
    border-color: #e48;
    // bg img cycle
    background-image: radial-gradient(
                      circle closest-side,
                      #e48 0%,
                      #e48 50%,
                      transparent 50%,
                      transparent 100%);
  }

  display: none;
`;

完整代码:

https://github.com/kenpeter/radio-button

Answer 1

检查:https://codesandbox.io/embed/sparkling-paper-3skk1?fontsize=14 它应该可以解决您的问题。 您只是错过了 Input 中的 &:before。

export const Input = styled.input`
  &:checked + ${Span} {
    &:before {  // You missed before
      background-image: radial-gradient(
        circle closest-side,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(238, 68, 136, 1) 50%,
        transparent 50%,
        transparent 100%
      );
      border-color: #e48;
    }
  }

  display: none;
`;