材质UI滑块不会滑动 [英] Material UI Slider won't slide
问题描述
我有一个Material UI滑块，单击并拖动它不会滑动.我或多或少从 https://material-ui.com/components 复制了其中一个示例/slider/并添加了onChange函数.如果单击不同的位置，则值更新就很好.我一直盯着这太久了，对代码视而不见，无法弄清我所缺少的内容.
这是沙盒
的链接 import React，{useState} from"react";从"prop-types"导入PropTypes；从"@ material-ui/styles/withStyles"导入withStyles；从"@ material-ui/core/Card"导入卡；从"@ material-ui/core"导入{印刷术，纸张，网格，CssBaseline}；从"@ material-ui/core/Slider"导入滑块；功能App(props){const [state，setState] = useState({栏位:{合同金额:10000，termValue:2}});const handleInvestmentChange =名称=>(e，值)＝>{setState({...状态，栏位:{... state.fields，[名称]:值}});};const AmountSlider = withStyles({根: {颜色:#52af77"，高度:8}，拇指:{高度:24，宽度:24，backgroundColor:#fff"，边框:"2px实心currentColor"，marginTop:-8，marginLeft:-12，& :: focus，&:hover，& $ active":{boxShadow:继承"}}，积极的: {}，valueLabel:{左:"calc(-50％+ 14px)"，上:-22，& *":{背景:透明"，颜色:#000"}}，追踪: {高度:8，borderRadius:4}，导轨:{高度:8borderRadius:4}})(滑块);const TermSlider = withStyles({根: {颜色:#52af77"，高度:8}，拇指:{高度:24，宽度:24，backgroundColor:#fff"，边框:"2px实心currentColor"，marginTop:-8，marginLeft:-12，& :: focus，&:hover，& $ active":{boxShadow:继承"}}，积极的: {}，valueLabel:{左:"calc(-50％+ 4px)"}，追踪: {高度:8borderRadius:4}，导轨:{高度:8borderRadius:4}})(滑块);返回 (< div>< CssBaseline/><版式变体="h4" align ="center" component ="h1" gutterBottom>选择您的投资水平</Typography><卡>< Paper style = {{padding:16，minHeight:445，maxHeight:445}}><网格容器alignItems ="flex-start" interval = {2}><网格项xs = {12} lg = {12} xl = {12}>< Typography variant ="h4">投资金额</Typography>< Typography variant ="h6" gutterBottom>$ {state.fields.contractAmount.toLocaleString()}</Typography>< AmountSlidervalueLabelDisplay ="auto"defaultValue = {10000}值= {typeof state.fields.contractAmount ===数字"?state.fields.contractAmount:2000}onChange={handleInvestmentChange("contractAmount")}步骤= {1000}min = {2000}最大值= {100000}/>< Typography variant ="h4">投资条款</Typography>< Typography variant ="h6" gutterBottom>{state.fields.termValue}年</Typography>< TermSlidername ="termValue"valueLabelDisplay ="off"aria-label =术语滑块"defaultValue = {10}值= {typeof state.fields.termValue ===数字"?state.fields.termValue:2}onChange = {handleInvestmentChange("termValue")}min = {2}最大值= {25}/><网格物品样式= {{marginTop:16alignContent:正确"，alignItems:正确"}}>< Typography variant ="p">*您的投资金额和合约期限可以在以下位置更改我们的条款和条件中所述的任何时间使适应.</Typography></Grid></Grid></Grid></Paper></卡></div>);}导出默认应用程序； 如果您需要自定义MUI滑块的主题，则需要使用 然后尝试将自定义css移到具有 然后在模板中使用它， 同样可以为TermSlider实现自定义主题. 注意:我认为您同时对 例如，如果您的金额"和期限"滑块都具有相同的css，则可以对金额"和期限"滑块使用 I have a Material UI slider that won't slide when you click on it and drag it. I've more or less copied one of the examples from https://material-ui.com/components/slider/ and added an onChange function. The values update just fine if you click around to different spots. I've been staring at this too long and have gone code blind and can't figure out what I'm missing. Here's a link to a Sandbox
If you need to customize the theme of MUI Slider then you need to use MUI Theme Provider. And you need to import it like, Then try moving your custom css into a variable with the value of Then in template use it like, Same way you can implement the custom theme for TermSlider as well.. Note:
I think you are using the same css for both Eg.., You could use 这篇关于材质UI滑块不会滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ createMuiTheme 方法值的变量中，该方法具有 overrides 属性，例如
const AmountSlider = createMuiTheme({覆盖:{MuiSlider:{根: {颜色:#52af77"，高度:8}，拇指:{高度:24，宽度:24，backgroundColor:#fff"，边框:"2px实心currentColor"，marginTop:-8，marginLeft:-12，& :: focus，&:hover，& $ active":{boxShadow:继承"}}，积极的: {}，valueLabel:{左:"calc(-50％+ 14px)"，上:-22，& *":{背景:透明"，颜色:#000"}}，追踪: {高度:8borderRadius:4}，导轨:{高度:8borderRadius:4}}}});
< ThemeProvider theme = {AmountSlider}><滑块valueLabelDisplay ="off"defaultValue = {10000}值= {typeof state.fields.contractAmount ===数字"?state.fields.contractAmount:2000}onChange = {handleInvestmentChange("contractAmount")}步骤= {1000}min = {2000}最大值= {100000}/></ThemeProvider> AmountSlider 和 TermSlider 使用相同的CSS，请创建一个主题变量并将其用于两者. theme = {AmountSlider} ./p>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;
import { ThemeProvider } from "@material-ui/styles";
createMuiTheme method which has overrides property like, 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>
AmountSlider and TermSlider if so, create a single theme variable and use it for both..theme={AmountSlider} for both the Amount and Term sliders if both has the same css.. Ofcourse the variable name can be unique in this case..
