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