feat: 修改select下拉图标

index
icefire 2024-10-14 22:56:39 +08:00
parent 8b1faf408d
commit d79e186bb8
3 changed files with 31 additions and 1 deletions

View File

@ -30,6 +30,15 @@ import i18n from "i18next";
import languageImg from "./images/language.png"; import languageImg from "./images/language.png";
import Arrow from './images/arrow.svg' import Arrow from './images/arrow.svg'
import SvgIcon from '@mui/material/SvgIcon';
function CustomIcon(props) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
</SvgIcon>
);
}
class App extends React.Component { class App extends React.Component {
constructor(props) { constructor(props) {
@ -287,6 +296,7 @@ class App extends React.Component {
className="language-select" className="language-select"
value={language} value={language}
label={t("language")} label={t("language")}
IconComponent={CustomIcon}
onChange={(e) => { onChange={(e) => {
let lang = e.target.value; let lang = e.target.value;
this.setState({ this.setState({

View File

@ -16,6 +16,15 @@ import verticalChecked from "../../images/vertical-button-checked.png";
import verticalButton from "../../images/vertical-button.png"; import verticalButton from "../../images/vertical-button.png";
import modeSelectPng from "../../images/mode-select.png"; import modeSelectPng from "../../images/mode-select.png";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import SvgIcon from '@mui/material/SvgIcon';
function CustomIcon(props) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
</SvgIcon>
);
}
var deviceConfigs = [ var deviceConfigs = [
{ {
@ -74,6 +83,7 @@ function Pane(props) {
id="mode-select" id="mode-select"
value={mode} value={mode}
onChange={(e) => modeChange(e)} onChange={(e) => modeChange(e)}
IconComponent={CustomIcon}
sx={{ sx={{
width: "100%", width: "100%",
height: '42px', height: '42px',
@ -88,7 +98,7 @@ function Pane(props) {
'&.Mui-focused': { '&.Mui-focused': {
borderColor: '#757575', borderColor: '#757575',
'&.MuiOutlinedInput-notchedOutline': { '&.MuiOutlinedInput-notchedOutline': {
borderColor: '#757575', borderColor: '#757575 !important',
}, },
}, },
}} }}

View File

@ -0,0 +1,10 @@
import SvgIcon from '@mui/material/SvgIcon';
import React from "react";
export function ArrowIcon(props) {
return (
<SvgIcon viewBox="0 0 24 24" {...props}>
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z" fill="white" />
</SvgIcon>
);
}