Anfänger: Styling ReactJS Kontrollkästchen mit CSS-Pseudo-Elemente

Question

Ich versuche, reactjs Checkbox-Komponente mit CSS style. Es verwendet Pseudo-Elemente: after und: before.

Mock es auf HTML und CSS und es hat funktioniert! 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); 
} 

Aber als ich versuchte es auf meiner reactjs Komponente zu implementieren, die Checkbox angezeigt werden, vielleicht das: nach nicht funktioniert. Fiddle ReactJS Component Link

Wie soll ich den gleichen Stil auf ReactJS Checkbox-Komponente erreichen?

Answer 1

Es gibt mehrere Möglichkeiten, Pseudoelemente auf React wie Radium zu verwenden, aber afaik wird nicht unterstützt: nach /: before, stattdessen nach this und this schlägt es vor, ein Element anstelle der Pseudoelemente zu erstellen . Ich habe kein React-Beispiel dafür gefunden, und ich denke, die Verfügbarkeit von Pseudo-Elementen sollte vermeiden, unnötige DOM-Elemente zu erstellen.

Mit all diesen Einschränkungen, meine aktuelle Lösung für die Anpassung der Checkbox reagieren, so dass es funktioniert in den meisten Browsern war ein Element, das wirkt, sieht aus, und fühlt sich an wie ein Kontrollkästchen (Imposter), aber nicht ein Kontrollkästchen (eingabetyp = "checkbox"). Ich habe dies erreicht, indem ich ReactJS verwendet habe, um die Sichtbarkeit des span-Elements und des font-awesome-Icons auszulösen.

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'));