0
我有這個模塊，我需要將CSS應用到我的div類，我正在編程生成我不明白如何實現這一點，我已經使用內聯和常量方法，但didn沒有找到任何解決方案，如何將CSS應用於剩餘的標籤。請幫忙，因爲沒有這些CSS樣式我的組件是沒有任何價值的。將CSS應用於編程生成的類反應
<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>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;
}
在陣營你的CSS屬性格式名稱應被camelCase .. background-color應該是backgroundColor – MukulSharma