jamal tavana
6 سال پیش توسط jamal tavana مطرح شد
1 پاسخ

استفاده از چند استایل در style

سلام
استایلم رو از طریق سایت
https://staxmanade.com/CssToReact/
به ری اکت تبدیل کردم.
.form-group {
position: relative;
margin-bottom: 1.5rem;
}

.form-control-placeholder {
position: absolute;
top: 0;
padding: 7px 0 0 13px;
transition: all 200ms;
opacity: 0.5;
}

.form-control:focus + .form-control-placeholder,
.form-control:valid + .form-control-placeholder {
font-size: 100%;
transform: translate3d(0, -100%, 0);
opacity: 1;
}
که شد این:
let Style={
"form_group": {
"position": "relative",
"marginBottom": "1.5rem"
},
"form_control_placeholder": {
"position": "absolute",
"top": "0",
"padding": "7px 0 0 13px",
"transition": "all 200ms",
"opacity": "0.5"
},
"form_control_focusform_control_placeholder": {
"fontSize": "100%",
"transform": "translate3d(0, -100%, 0)",
"opacity": "1"
},
"form_control_valid
form_control_placeholder": {
"fontSize": "100%",
"transform": "translate3d(0, -100%, 0)",
"opacity": "1"
}
};
وقتی یک استایل به المنتی میدم کار می کنه ولی زمانی که از دو استایل برای المنتی استفاده می کنم خطا میده:
<input type="text" id="pwd" className="form-control" name="pwd" style={[Style.form_control_placeholder,Style.form_control_focusform_control_placeholder,Style.form_control_validform_control_placeholder]} required/>

متن خطا:
The above error occurred in the <input> component: in input (created by SingleIndex) in div (created by SingleIndex) in form (created by SingleIndex) in div (created by SingleIndex) in div (created by SingleIndex) in div (created by SingleIndex) in div (created by SingleIndex) in SingleIndex
حالت های مختلف استفاده از چند استایل رو امتحان کردم ولی بازم کار نمی کنه.


ثبت پرسش جدید
مهدی
@mahdi2606 6 سال پیش آپدیت شد
1

شما میتونی به شکل زیر عمل کنی
به طور مثال

const style = {
    one : {
        width : '500px',
        height:'500px',
    }

    two : {
        background : 'red'
    }
}

render(){
    return(
        <div style={{...style.one,...style.two,color:'white'}}></div>
    )
}

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام