如何更改 Material-UI 滑块颜色 [英] How to Change Material-UI Slider Color

问题描述

我想更改 Material UI Slider 组件颜色

我尝试更改 CSS 样式但它不起作用，然后我尝试了

如果您使用的是 Material-UI v4，那就是要走的路:

从react"导入React；从@material-ui/core/Slider"导入滑块；从@material-ui/core/styles"导入{createMuiTheme}；从@material-ui/styles"导入{ThemeProvider}；const muiTheme = createMuiTheme({覆盖:{MuiSlider:{拇指:{颜色:黄色"，},追踪: {红色'},轨道:{颜色:黑色'}}}});导出默认函数 V4Slider() {返回 (<ThemeProvider theme={muiTheme}><Slider min={18} max={90} defaultValue={40}/></ThemeProvider>);}

如果您使用的是其他版本的 material-ui，请告诉我是哪个版本，我会尽力提供帮助.

I want to change Material UI Slider component color

I have tried to change CSS style and it's not working, then I tried the solution given in this issue and applied this code but it's not working

getMuiTheme:

const muiTheme = getMuiTheme({
  slider: {
    trackColor: "yellow",
    selectionColor: "green"
  }
});

and in Component:

<MuiThemeProvider muiTheme={muiTheme}>
     <Slider
         min={18}
         max={90}
         ValueLabelComponent={ValueLabelComponent} 
         defaultValue={40}
     />
</MuiThemeProvider>

解决方案

It depends what version of Material-UI you are using.
Your code matches Material-UI v0.x:

import React from 'react';
import Slider from 'material-ui/Slider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { MuiThemeProvider } from 'material-ui';

const muiTheme = getMuiTheme({
  slider: {
    trackColor: "yellow",
    selectionColor: "red"
  }
});

export default function V0Slider() {


  return (
    <MuiThemeProvider muiTheme={muiTheme}>
    <Slider
    min={18}
    max={90}
    ValueLabelComponent={0} 
    defaultValue={40}
    />
   </MuiThemeProvider>
  );
}

If you are using Material-UI v4, that would be the way to go:

import React from "react";
import Slider from '@material-ui/core/Slider';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';

const muiTheme = createMuiTheme({
  overrides:{
    MuiSlider: {
      thumb:{
      color: "yellow",
      },
      track: {
        color: 'red'
      },
      rail: {
        color: 'black'
      }
    }
}
});

export default function V4Slider() {
  return (
    <ThemeProvider theme={muiTheme}>
      <Slider min={18} max={90} defaultValue={40} />
    </ThemeProvider>
  );
}

If you are using another version of material-ui, let me know which one and i'll try to help.

这篇关于如何更改 Material-UI 滑块颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！