我有一个Material UI滑块,单击并拖动它不会滑动。我或多或少地从https://material-ui.com/components/slider/复制了一个示例,并添加了onChange函数。如果单击不同的位置,则值更新就很好。我已经盯着这个太久了,对代码视而不见,无法弄清我缺少什么。
这是指向Sandbox
的链接import React, { useState } from "react";
import PropTypes from "prop-types";
import withStyles from "@material-ui/styles/withStyles";
import Card from "@material-ui/core/Card";
import { Typography, Paper, Grid, CssBaseline } from "@material-ui/core";
import Slider from "@material-ui/core/Slider";
function App(props) {
const [state, setState] = useState({
fields: {
contractAmount: 10000,
termValue: 2
}
});
const handleInvestmentChange = name => (e, value) => {
setState({
...state,
fields: {
...state.fields,
[name]: value
}
});
};
const AmountSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 14px)",
top: -22,
"& *": {
background: "transparent",
color: "#000"
}
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
})(Slider);
const TermSlider = withStyles({
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 4px)"
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
})(Slider);
return (
<div>
<CssBaseline />
<Typography variant="h4" align="center" component="h1" gutterBottom>
Select your Investment Level
</Typography>
<Card>
<Paper style={{ padding: 16, minHeight: 445, maxHeight: 445 }}>
<Grid container alignItems="flex-start" spacing={2}>
<Grid item xs={12} lg={12} xl={12}>
<Typography variant="h4">Investment Amount</Typography>
<Typography variant="h6" gutterBottom>
${state.fields.contractAmount.toLocaleString()}
</Typography>
<AmountSlider
valueLabelDisplay="auto"
defaultValue={10000}
value={
typeof state.fields.contractAmount === "number"
? state.fields.contractAmount
: 2000
}
onChange={handleInvestmentChange("contractAmount")}
step={1000}
min={2000}
max={100000}
/>
<Typography variant="h4">Investment Term</Typography>
<Typography variant="h6" gutterBottom>
{state.fields.termValue} years
</Typography>
<TermSlider
name="termValue"
valueLabelDisplay="off"
aria-label="term slider"
defaultValue={10}
value={
typeof state.fields.termValue === "number"
? state.fields.termValue
: 2
}
onChange={handleInvestmentChange("termValue")}
min={2}
max={25}
/>
<Grid
item
style={{
marginTop: 16,
alignContent: "right",
alignItems: "right"
}}
>
<Typography variant="p">
*Your investment amount and contract length can be changed at
any time as described in our Terms & Conditions.
</Typography>
</Grid>
</Grid>
</Grid>
</Paper>
</Card>
</div>
);
}
export default App;
答案 0 :(得分:2)
如果您需要自定义MUI滑块的主题,则需要使用MUI Theme Provider。
您需要将其导入,
import { ThemeProvider } from "@material-ui/styles";
然后尝试将自定义css移到具有createMuiTheme
方法值的变量,该方法具有overrides
属性,例如,
const AmountSlider = createMuiTheme({
overrides: {
MuiSlider: {
root: {
color: "#52af77",
height: 8
},
thumb: {
height: 24,
width: 24,
backgroundColor: "#fff",
border: "2px solid currentColor",
marginTop: -8,
marginLeft: -12,
"&:focus,&:hover,&$active": {
boxShadow: "inherit"
}
},
active: {},
valueLabel: {
left: "calc(-50% + 14px)",
top: -22,
"& *": {
background: "transparent",
color: "#000"
}
},
track: {
height: 8,
borderRadius: 4
},
rail: {
height: 8,
borderRadius: 4
}
}
}
});
然后在模板中使用它,
<ThemeProvider theme={AmountSlider}>
<Slider
valueLabelDisplay="off"
defaultValue={10000}
value={
typeof state.fields.contractAmount === "number"
? state.fields.contractAmount
: 2000
}
onChange={handleInvestmentChange("contractAmount")}
step={1000}
min={2000}
max={100000}
/>
</ThemeProvider>
同样可以为TermSlider实现自定义主题。
注意:
我认为您在AmountSlider
和TermSlider
上都使用了相同的CSS,如果是的话,请创建一个主题变量并将其用于两者。
例如,如果两者的css相同,您可以对“数量”和“期限”滑块使用theme={AmountSlider}
。当然,在这种情况下,变量名可以是唯一的。.