带有 Material UI 滑块和 React 的简单字体大小更改器答案

【问题标题】：Simple font size changer with Material UI slider and React带有 Material UI 滑块和 React 的简单字体大小更改器
【发布时间】：2021-01-22 00:19:38
【问题描述】：

我正在尝试使用 React 和 Material UI 制作一个简单的滑块来更改字体大小。滑块称为 PrettoSlider，它是 Material UI 的一部分。

我试图实现的是使用滑块，然后根据滑块更改字体大小。这就是我目前所拥有的

export default function ChangeFontSlider() {

  const [ItemValue, setItemValue] = React.useState(20);

const handlingChange = (event) => {
   setItemValue(event.target.value);
   event.preventDefault();
}
return (
    <>
      <p style={{fontSize: {ItemValue}}}>Drag me to change the font</p>
      <PrettoSlider 
      onChange={handlingChange}
      value={ItemValue}
      />
    </>
  );
}

当试图滑动滑块时，我得到一个错误或字体保持不变。任何的想法？谢谢！

【问题讨论】：

此处缺少信息。 PrettoSlider 是什么？我在任何地方都找不到 MUI，它只是一个样式化的 MUI 滑块吗？还有什么具体的错误？

标签： reactjs material-ui slider

【解决方案1】：

滑块称为 PrettoSlider，它是 Material UI 的一部分。

PrettoSlider 就是一个例子。下划线组件是 Slider，在此处记录 https://material-ui.com/api/slider/。

根据文档，onChange函数有两个参数，event是事件源，第二个参数value是移动滑块时的新值，是你需要从中获取数据的地方。

【讨论】：

【解决方案2】：

我知道这已经 8 个月大了，但你也可以在你的样式标签中这样做

 <p style={{fontSize: `${ItemValue}px` }}>Drag me to change the font</p>

那么，不是每次滑动时都更新一个数字，它实际上会以像素为单位增加

【讨论】：

【解决方案3】：

在 mui 中更改滑块标签的字体，您可以在滑块 api 中使用 global class。

import { makeStyles } from "@mui/styles";

const sliderStyles= makeStyles({
  slider: {
    '& .MuiSlider-markLabel' : {fontFamily: 'Vazir' , fontSize: "12px"}
  }
})

并将此类设置为滑块中的 className 属性。

import { sliderStyles} from "YOUR/STYLES/PATH";
<Slider
     valueLabelFormat={valueLabelFormat}
     getAriaValueText={valuetext}
     step={null}
     valueLabelDisplay="on"
     marks={sliderMarks}
     className={classes.slider} //this line important
 />

【讨论】：