Commit 26eb9c9f authored by chenshouchao's avatar chenshouchao

feat: input select 组件样式修改, 边框颜色 禁用样式 hover样式等

parent 8792686c
...@@ -36,11 +36,16 @@ const MyInput = (props: MyInputProps) => { ...@@ -36,11 +36,16 @@ const MyInput = (props: MyInputProps) => {
height: "36px", height: "36px",
fontSize: "14px", fontSize: "14px",
border: "rgba(221, 225, 230, 1)", border: "rgba(221, 225, 230, 1)",
padding: "7px 12px",
"&.MuiInputBase-sizeSmall": { "&.MuiInputBase-sizeSmall": {
height: "32px", height: "32px",
}, },
"& .Mui-disabled": { "&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)", background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
}, },
}, },
multiline: { multiline: {
...@@ -49,7 +54,12 @@ const MyInput = (props: MyInputProps) => { ...@@ -49,7 +54,12 @@ const MyInput = (props: MyInputProps) => {
padding: 0, padding: 0,
}, },
}, },
input: {}, input: {
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
},
},
}, },
}, },
MuiInputLabel: { MuiInputLabel: {
...@@ -68,26 +78,48 @@ const MyInput = (props: MyInputProps) => { ...@@ -68,26 +78,48 @@ const MyInput = (props: MyInputProps) => {
MuiOutlinedInput: { MuiOutlinedInput: {
styleOverrides: { styleOverrides: {
root: { root: {
padding: "7px 12px",
"&.Mui-focused .MuiOutlinedInput-notchedOutline": { "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px", borderWidth: "1px",
}, },
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6", borderColor: "#DDE1E6",
}, },
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
":hover": { ":hover": {
"& .MuiOutlinedInput-notchedOutline": error "& .MuiOutlinedInput-notchedOutline": error
? {} ? {}
: { : {
borderColor: "#1370ff", borderColor: "#1370ff",
}, },
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
}, },
}, },
input: { input: {
padding: "6.5px 12px", padding: "0",
verticalAlign: "middle", verticalAlign: "middle",
}, },
}, },
}, },
MuiTypography: {
styleOverrides: {
root: {
marginRight: "-5px",
},
},
},
}, },
}); });
......
...@@ -73,6 +73,16 @@ export default function MySelect(props: IProps) { ...@@ -73,6 +73,16 @@ export default function MySelect(props: IProps) {
height: "36px", height: "36px",
"& .Mui-disabled": { "& .Mui-disabled": {
background: "rgba(247, 248, 250, 1)", background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
},
input: {
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
}, },
}, },
}, },
...@@ -92,10 +102,30 @@ export default function MySelect(props: IProps) { ...@@ -92,10 +102,30 @@ export default function MySelect(props: IProps) {
MuiOutlinedInput: { MuiOutlinedInput: {
styleOverrides: { styleOverrides: {
root: { root: {
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderWidth: "1px",
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
":hover": { ":hover": {
"& .MuiOutlinedInput-notchedOutline": { "& .MuiOutlinedInput-notchedOutline": {
borderColor: "#1370ff", borderColor: "#1370ff",
}, },
"&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed",
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "#DDE1E6",
},
},
}, },
}, },
}, },
......
...@@ -202,6 +202,7 @@ const SaveOperator = (props: IProps) => { ...@@ -202,6 +202,7 @@ const SaveOperator = (props: IProps) => {
<span <span
style={{ style={{
position: "absolute", position: "absolute",
fontSize: "14px",
bottom: "7px", bottom: "7px",
right: "12px", right: "12px",
color: description.length >= 300 ? "#d32f2f" : "#C2C6CC", color: description.length >= 300 ? "#d32f2f" : "#C2C6CC",
......
...@@ -76,7 +76,7 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -76,7 +76,7 @@ const AddProject = (props: IAddProjectProps) => {
project.filetoken = res; project.filetoken = res;
currentProjectStore.changeProject(project); currentProjectStore.changeProject(project);
}); });
navigate(`/product/cadd/projectOverview`) navigate(`/product/cadd/projectOverview`);
} }
}, },
onError: () => { onError: () => {
...@@ -137,7 +137,7 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -137,7 +137,7 @@ const AddProject = (props: IAddProjectProps) => {
const handleDescChange = (e: any) => { const handleDescChange = (e: any) => {
const desc = e.target.value; const desc = e.target.value;
setDesc(desc.slice(0,300)); setDesc(desc.slice(0, 300));
// if (desc.length > 300) { // if (desc.length > 300) {
// setDescCheck({ // setDescCheck({
// error: true, // error: true,
...@@ -177,7 +177,6 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -177,7 +177,6 @@ const AddProject = (props: IAddProjectProps) => {
title="新建项目" title="新建项目"
loading={loading} loading={loading}
> >
<div className={style.formBox} onClick={handleFromBox}> <div className={style.formBox} onClick={handleFromBox}>
<MyInput <MyInput
required required
...@@ -222,9 +221,10 @@ const AddProject = (props: IAddProjectProps) => { ...@@ -222,9 +221,10 @@ const AddProject = (props: IAddProjectProps) => {
<span <span
style={{ style={{
position: "absolute", position: "absolute",
fontSize: "14px",
bottom: "7px", bottom: "7px",
right: "12px", right: "12px",
color: desc.length >= 300 ? "#d32f2f" : "#C2C6CC" color: desc.length >= 300 ? "#d32f2f" : "#C2C6CC",
}} }}
> >
{desc.length}/300 {desc.length}/300
......
...@@ -253,9 +253,10 @@ const SaveCustomTemplate = (props: IProps) => { ...@@ -253,9 +253,10 @@ const SaveCustomTemplate = (props: IProps) => {
<span <span
style={{ style={{
position: "absolute", position: "absolute",
fontSize: "14px",
bottom: "7px", bottom: "7px",
right: "12px", right: "12px",
color: description.length >= 300 ? "#d32f2f" : "#C2C6CC" color: description.length >= 300 ? "#d32f2f" : "#C2C6CC",
}} }}
> >
{description.length}/300 {description.length}/300
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment