初学者：使用 CSS 伪元素设计 ReactJS 复选框

Posted 2023-02-22

【中文标题】初学者：使用 CSS 伪元素设计 ReactJS 复选框

【英文标题】：Beginner: Styling ReactJS Checkbox using CSS Pseudo Elements

【发布时间】：2016-12-09 23:53:42

【问题描述】：

我正在尝试使用 CSS 设置 reactjs 复选框组件的样式。它使用伪元素 :after 和 :before。

在 html 和 css 上模拟它，它起作用了！ Fiddle Link

input[type="checkbox"]#checkbox + label::before 
   content: "";
   display: inline-block;
   vertical-align: -25%;
   height: 2ex;
   width: 2ex;
   background-color: white;
   border: 1px solid #c3c4c6;
   border-radius: 4px;
   margin-right: 0.5em;


input[type="checkbox"]#checkbox:checked + label::after 
   content: '';
   position: absolute;
   width: 1.2ex;
   height: 0.4ex;
   background: rgba(0, 0, 0, 0); 
   top: 0.5ex;
   left: 0.4ex;
   border: 3px solid #60cd18;
   border-top: none;
   border-right: none;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg); 
 

但是当我尝试在显示复选框的 reactjs 组件上实现它时，可能 :after 不起作用。 Fiddle ReactJS Component Link

我应该如何在 ReactJS 复选框组件上实现相同的样式？

【参考方案1】：

有几种方法可以在 React 上使用伪元素，例如 Radium，但是 afaik 它不支持:after/:before，而是根据this 和this，它建议创建一个元素来代替伪元素。我没有找到任何 React 示例，我认为伪元素的可用性是为了避免创建不必要的 DOM 元素。

由于所有这些限制，我目前在 react 中自定义复选框以使其适用于大多数浏览器的解决方案是创建一个元素，该元素的行为、外观和感觉都像一个复选框（冒名顶替者），而不是复选框本身（输入类型=“复选框”）。我通过使用 ReactJS 来触发 span 元素和 font-awesome 图标的可见性来实现这一点。

Example

/*  html   */
<div id="container">
</div>

/* JS  */
var Checkbox = React.createClass(
        getDefaultProps: function() 
        return 
        value: true,
        name: '',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: '#c3c4c6',
        borderRadius: '4px',
        checkColor: '#60cd18',
        height: '1px',
        width: '',
        namePaddingLeft: '10px',
        namePaddingRight: ''
        ;
    ,
    render: function() 
        var style = 
            boxStyle: 
            borderWidth: this.props.borderWidth,
            borderStyle: this.props.borderStyle,
            borderColor: this.props.borderColor,
            borderRadius: this.props.borderRadius,
            paddingLeft: this.props.width,
                    paddingRight: this.props.width,
            paddingTop: this.props.height,
            paddingBottom: this.props.height
          ,
          show: 
            visibility: 'visible',
            color: this.props.checkColor
          ,
          hidden: 
            visibility: 'hidden',
            color: this.props.checkColor
          ,
          name: 
            paddingLeft: this.props.namePaddingLeft,
            paddingRight: this.props.namePaddingRight
          
        ;
        return (
        <div>
            <span style=style.boxStyle>
                    <i className="fa fa-check fa-lg" style=(this.props.value) ? style.show : style.hidden></i>
                    </span>
           <span style=style.name>this.props.name</span>
        </div>
        );
    
);

var WrapperCheckbox = React.createClass( 
    getInitialState: function()
    return value: false
  ,
  handleClick: function()
    console.log('Click Fires!');
    this.setState(value: !this.state.value);
  ,
    render: function()
    return (
        <div onClick=this.handleClick>
            <Checkbox name='Reserve Guarantee' value=this.state.value/>
      </div>
    );
  
);

React.render(<WrapperCheckbox />, document.getElementById('container'));