feat: 修改select下拉图标
parent
8b1faf408d
commit
d79e186bb8
10
src/App.js
10
src/App.js
|
@ -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({
|
||||||
|
|
|
@ -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',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue