استفاده از چند استایل در 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_validform_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
حالت های مختلف استفاده از چند استایل رو امتحان کردم ولی بازم کار نمی کنه.
پاسخها
1
شما میتونی به شکل زیر عمل کنی
به طور مثال
const style = {
one : {
width : '500px',
height:'500px',
}
two : {
background : 'red'
}
}
render(){
return(
<div style={{...style.one,...style.two,color:'white'}}></div>
)
}
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد