React单选按钮：选中的循环未对齐答案

【问题标题】：React radio button: checked cycle not alignedReact单选按钮：选中的循环未对齐
【发布时间】：2019-09-30 20:25:03
【问题描述】：

我尝试将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;

style.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

【问题讨论】：

请在 codesandbox.io 或类似网站上获取您的问题示例。

标签： javascript css reactjs radio-button styled-components

【解决方案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;
`;

【讨论】：