Material-UIのスライダーがドラッグしても動かない

問題

React Slider component - Material-UI
↑このサンプルコードのまんまコピーして、value と onChangeを設定すると、スライダーのドラッグ操作で値変更ができない。
クリックだと操作可能。

解決策

カスタムCSSを使用していると発生する事象らしい。
createMuiThemeのoverridesプロパティでCSSを設定し、ThemeProviderを使用すると解消した。 stackoverflow.com

import React, { useState, useRef } from 'react';

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';
import Box from '@material-ui/core/Box';

const App = () => {

  const AirbnbSlider = createMuiTheme({
    overrides: {
      MuiSlider: {
        root: {
          color: '#3a8589',
          height: 3,
          padding: '13px 0',
        },
        thumb: {
          height: 27,
          width: 27,
          backgroundColor: '#fff',
          border: '1px solid currentColor',
          marginTop: -12,
          marginLeft: -13,
          boxShadow: '#ebebeb 0 2px 2px',
          '&:focus, &:hover, &$active': {
            boxShadow: '#ccc 0 2px 3px 1px',
          },
          '& .bar': {
            // display: inline-block !important;
            height: 9,
            width: 1,
            backgroundColor: 'currentColor',
            marginLeft: 1,
            marginRight: 1,
          },
        },
        active: {},
        track: {
          height: 3,
        },
        rail: {
          color: '#d8d8d8',
          opacity: 1,
          height: 3,
        },
      }
    }
  });

  const [rangeValue, setRangeValue] = useState([20, 40]);
  const handleChangeRangetest = (event, newValue) => {
    console.log(newValue)
    setRangeValue(newValue)
  };
  const handleChangeRange2 = newValue => {
    if (newValue === ""){ newValue = 0}
    setRangeValue([parseInt(newValue), rangeValue[1]]);
  };
  const handleChangeRange3 = newValue => {
    if (newValue === ""){ newValue = 0}
    setRangeValue([rangeValue[0], parseInt(newValue)]);
  };

  return (
    <div className="App">
      <Box m={10}>
        <ThemeProvider theme={AirbnbSlider}>
          <Slider
            value={rangeValue}
            getAriaLabel={(index) => (index === 0 ? 'Start' : 'End')}
            defaultValue={rangeValue}
            marks={[
              { value: 10, label: 10, },
              { value: 20, label: 20, },
            ]}
            onChange={handleChangeRangetest}
          />
        </ThemeProvider>
        <p>
          <input type='text' placeholder='Loop Start' value={rangeValue[0]} onChange={e => handleChangeRange2(e.target.value)} />
          <input type='text' placeholder='Loop End' value={rangeValue[1]} onChange={e => handleChangeRange3(e.target.value)} />
        </p>
      </Box>
    </div>
  );
}

export default App;

動作しなかったコード

import React, { useState, useRef } from 'react';

import { withStyles } from '@material-ui/core/styles';
import Slider from '@material-ui/core/Slider';
import Box from '@material-ui/core/Box';

const App = () => {

  const AirbnbSlider = withStyles({
    root: {
      color: '#3a8589',
      height: 3,
      padding: '13px 0',
    },
    thumb: {
      height: 27,
      width: 27,
      backgroundColor: '#fff',
      border: '1px solid currentColor',
      marginTop: -12,
      marginLeft: -13,
      boxShadow: '#ebebeb 0 2px 2px',
      '&:focus, &:hover, &$active': {
        boxShadow: '#ccc 0 2px 3px 1px',
      },
      '& .bar': {
        // display: inline-block !important;
        height: 9,
        width: 1,
        backgroundColor: 'currentColor',
        marginLeft: 1,
        marginRight: 1,
      },
    },
    active: {},
    track: {
      height: 3,
    },
    rail: {
      color: '#d8d8d8',
      opacity: 1,
      height: 3,
    },
  })(Slider);

  const [rangeValue, setRangeValue] = useState([20, 40]);
  const handleChangeRangetest = (event, newValue) => {
    console.log(newValue)
    setRangeValue(newValue)
  };
  const handleChangeRange2 = newValue => {
    if (newValue === ""){ newValue = 0}
    setRangeValue([parseInt(newValue), rangeValue[1]]);
  };
  const handleChangeRange3 = newValue => {
    if (newValue === ""){ newValue = 0}
    setRangeValue([rangeValue[0], parseInt(newValue)]);
  };

  return (
    <div className="App">
      <Box m={10}>
        <AirbnbSlider
          value={rangeValue}
          getAriaLabel={(index) => (index === 0 ? 'Start' : 'End')}
          defaultValue={rangeValue}
          marks={[
            { value: 10, label: 10, },
            { value: 20, label: 20, },
          ]}
          onChange={handleChangeRangetest}
        />
        <p>
          <input type='text' placeholder='Loop Start' value={rangeValue[0]} onChange={e => handleChangeRange2(e.target.value)} />
          <input type='text' placeholder='Loop End' value={rangeValue[1]} onChange={e => handleChangeRange3(e.target.value)} />
        </p>
      </Box>
    </div>
  );
}

export default App;