Skip to content

B
bkunyun
Commit eea99569 authored by chenshouchao's avatar chenshouchao
Browse files
Options

select 组件样式优化

parent 0320f2fa
Hide whitespace changes
Inline Side-by-side
Showing with 57 additions and 25 deletions
src/components/mui/MySelect.tsx
View file @ eea99569
...@@ -12,6 +12,7 @@ import FormControl from "@mui/material/FormControl"; ...@@ -12,6 +12,7 @@ import FormControl from "@mui/material/FormControl";
import FormHelperText from "@mui/material/FormHelperText"; import FormHelperText from "@mui/material/FormHelperText";
import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select"; import Select, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
import { createTheme, ThemeProvider } from "@mui/material"; import { createTheme, ThemeProvider } from "@mui/material";
import selectActive from "@/assets/project/selectActive.svg";
export interface IOption { export interface IOption {
label: string; label: string;
...@@ -80,10 +81,26 @@ export default function MySelect(props: IProps) { ...@@ -80,10 +81,26 @@ export default function MySelect(props: IProps) {
}, },
}, },
input: { input: {
fontSize: "14px",
"&.Mui-disabled": { "&.Mui-disabled": {
background: "rgba(247, 248, 250, 1)", background: "rgba(247, 248, 250, 1)",
cursor: "not-allowed", cursor: "not-allowed",
}, },
img: {
display: "none",
},
},
},
},
MuiList: {
styleOverrides: {
root: {
"& .MuiButtonBase-root": {
"&.Mui-selected": {
backgroundColor: "#fff",
color: "#1370FF",
},
},
}, },
}, },
}, },
...@@ -91,9 +108,12 @@ export default function MySelect(props: IProps) { ...@@ -91,9 +108,12 @@ export default function MySelect(props: IProps) {
MuiMenuItem: { MuiMenuItem: {
styleOverrides: { styleOverrides: {
root: { root: {
paddingRight: "46px",
fontSize: "14px",
lineHeight: "24px",
":hover": { ":hover": {
backgroundColor: "#ECF4FF ", backgroundColor: "#F0F2F5 ",
color: "#1370FF", color: "#1E2633",
}, },
}, },
}, },
...@@ -186,6 +206,19 @@ export default function MySelect(props: IProps) { ...@@ -186,6 +206,19 @@ export default function MySelect(props: IProps) {
key={index} key={index}
> >
{item.label} {item.label}
{value === item.value && (
<img
style={{
width: "16px",
height: "16px",
position: "absolute",
top: "10px",
right: "12px",
}}
src={selectActive}
alt=""
/>
)}
</MenuItem> </MenuItem>
); );
}) })
......
src/views/Project/ProjectData/MoveFile/index.module.css
View file @ eea99569
.rootTitle { .rootTitle {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
background-color: rgba(25, 118, 210, 0.08); background-color: rgba(25, 118, 210, 0.08);
/* background-color: rgba(25, 118, 210, 0.5); */ line-height: 44px;
line-height: 44px; color: rgba(30, 38, 51, 1);
color: rgba(30, 38, 51, 1); font-size: 14px;
font-size: 14px; font-weight: 600;
font-weight: 600; display: flex;
display: flex; justify-content: flex-start;
justify-content: flex-start; align-items: center;
align-items: center;
} }
.rootTitleActive { .rootTitleActive {
background-color: rgba(25, 118, 210, 0.2); background-color: rgba(25, 118, 210, 0.2);
} }
.bigFolderIcon { .bigFolderIcon {
margin: 0 9px; margin: 0 9px;
} }
.treeLabel { .treeLabel {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.treeLabelText{ .treeLabelText {
line-height: 44px; line-height: 44px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow:ellipsis; -o-text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 320px; width: 320px;
} }
.labelFolderIcon { .labelFolderIcon {
margin-right: 9px; margin-right: 9px;
} }
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