Question

我有这个模块，我需要将CSS应用到我的div类，我正在以编程方式生成我不明白如何实现这一点，我使用了内联和常量方法，但没有找到任何如何在剩余标签上应用CSS的解决方案。请帮助，因为没有那些CSS样式我的组件没有任何价值。

＆＃13;

<script type="text/jsx">
    var styles = {
        width: '140px',
        border: '1px solid #ccc',
        marginBottom: '12px',
        height: '20px' 
    }
    var color = {
        backgroundColor: '#6cb33e'
    }
    class PasswordStrength extends React.Component {    
        constructor() {
            super();
            this.state = {                        
                type: 'password',
                checked: false,
                meterTitle: 'Invalid',
                meterClass: 'danger',
                meterWidth: 0,
                rules: {
                    isValidLength: false,
                    hasNumber: false,
                    hasLetter: false
                }
            };
        }

        onPasswordChange(e) {
            this.setState({          
                rules: {
                    hasNumber: e.target.value.match(/\d/) ? true : false,
                    hasLetter: e.target.value.match(/[A-z]/) ? true : false,
                    isValidLength: e.target.value.match(/^.{6,}$/) ? true : false
                }
            },function(){
                this.setMeterAttributes(this.state.rules);
            });         
        }

        setMeterAttributes(rules){
            var meterWidth = this.getMeterWidth(rules);
            this.setState({
                meterWidth: meterWidth,
                meterTitle: (100 === meterWidth ? "Strong" : "Medium" && 50 > meterWidth ? "Easy" : "Medium"),
                meterClass: (100 === meterWidth ? "" : "warning" && 50 > meterWidth ? "danger" : "warning")           
            });  
        }


        getMeterWidth (rules) {
            var property_count = 0, valid_property_count = 0, property;
            for (property in rules) {
                if (rules.hasOwnProperty(property)) {
                    property_count = property_count + 1;
                    if (rules[property]) {
                        valid_property_count = valid_property_count + 1;
                    }
                }
            }
            return (valid_property_count / property_count) * 100;  
        }

        getSingleRuleStatus(status) {       
            if(status){
                return "valid";
            }
        return "invalid";
        }

        render() {      
            return (                            
                <div className="password-strength-widget">
                    <Password type={this.state.type} onChange={this.onPasswordChange.bind(this)}/>
                    <br/><br/>
                    <RulesMeter title={this.state.meterTitle} className={this.state.meterClass} meterWidth={this.state.meterWidth}/>        
                    <RulesList 
                        isValidLength={this.getSingleRuleStatus(this.state.rules.isValidLength)} 
                        hasNumber={this.getSingleRuleStatus(this.state.rules.hasNumber)}
                        hasLetter={this.getSingleRuleStatus(this.state.rules.hasLetter)}
                        />
                </div>           
            )
        }
    }

    class RulesMeter extends React.Component {
        render() {
            return (
                <div>
                    <span>{this.props.title}</span>
                    <div style={styles} className="meter-wrapper">
                       <div className={this.props.className} style={{width: this.props.meterWidth + '%'}}></div>
                    </div>   
                </div>
            )
        }
    }

    class RulesList extends React.Component {
        render() {
            return (
                <ul>
                    <li className={this.props.hasNumber}>
                        At least one number (0-9)
                    </li>
                    <li className={this.props.hasLetter}>
                        At least one letter (a-z)
                    </li>
                    <li className={this.props.isValidLength}>
                        At least 6 characters
                    </li>   
                </ul>
            )
        }
    }

    class Password extends React.Component {  
        render() {
            return (
                <span>
                    <label htmlFor="password">Create Password</label><br/>               
                    <input
                    id="password" 
                    type={this.props.type} 
                    placeholder="Enter password...."               
                    onChange={this.props.onChange} 
                    /> 
                </span>   
            )
        }
    }

    ReactDOM.render( <PasswordStrength/>, document.getElementById('app') )
</script>
    <div class="container">
        <div class="title">
            <h2>Password Strength Meter</h2>
        </div>
        <div id="app"></div>           
    </div>

＆＃13;

CSS i need to apply:

.password-strength-widget .meter-wrapper div
        {
            height:20px; 
            background-color: #6cb33e;
        }
        .password-strength-widget .meter-wrapper div.danger 
        {        
            background-color: #d40000;
        }
        .password-strength-widget .meter-wrapper div.warning 
        {        
            background-color: #FFF200;
        }

＆＃13;

Answer 1

您可以将此css放在单独的.css文件中，并将其与<style>标记一起包含，也可以在HTML中内联。

在您引用类

的地方，您的React代码看起来没问题

选项1）外部CSS文件

<link rel="stylesheet" type="text/css" href="mystyles.css">

选项2）内联样式

<style>
  h1 {color:red;}
  p {color:blue;}
</style>

在以编程方式生成的类中应用CSS

1 个答案: