Question

作者随后关闭了an issue requesting documentation for theming。作者找到了答案。非程序员可能不会。至少，我正在帮助的非程序员设计师甚至不知道从哪里开始（我仍然没有使用不同颜色的滑块）。这种文档会很棒。即使它只是链接到代码@jdelafon的一些解释，只需回答以下具体示例。

最终，我们需要一组滑块，每个滑块都有不同的颜色。似乎适当的方法是使用每个元素inline styles。

我做了一个简单的例子here。你能改变滑块的颜色吗？（我们开始走向突破CSS的道路，但是小部件是如此动态，以至于这种方法最终变得非常难看。）

Slider有两个不同的主题用插槽，它们似乎都没有响应带有selectionColor键的嵌入对象。

应该很简单。可能是这样，但似乎没有证件。否则它是一个rad UI工具包，感谢开发者！

Answer 1

看看this line of getMuiTheme.js。您可以在那里找到slider可以覆盖这些样式的内容：

{
  trackSize: 2,
  trackColor: palette.primary3Color,
  trackColorSelected: palette.accent3Color,
  handleSize: 12,
  handleSizeDisabled: 8,
  handleSizeActive: 18,
  handleColorZero: palette.primary3Color,
  handleFillColor: palette.alternateTextColor,
  selectionColor: palette.primary1Color,
  rippleColor: palette.primary1Color,
}

在material-ui中，您需要使用MuiThemeProvider才能使用自定义主题。举个例子：

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

const theme1 = getMuiTheme({
  slider: {
    selectionColor: "red",
    trackSize: 20
  }
})

const theme2 = getMuiTheme({
  slider: {
    selectionColor: "green",
    trackSize: 30
  }
})

const HelloWorld = () => (
  <div>
    ...
  <MuiThemeProvider muiTheme={theme1}>
    <Slider defaultValue={0.5}/>
  </MuiThemeProvider>
  <MuiThemeProvider muiTheme={theme2}>
    <Slider defaultValue={0.5}/>
  </MuiThemeProvider>
  </div>
);

export default HelloWorld;

您修改过的webpackbin：http://www.webpackbin.com/EyEPnZ_8M

您尝试使用的sliderStyle用于不同的样式:-)与marginTop / marginBottom一样，full list can be found here。

无法在材质UI中设置滑块（或可能是任何内容）的样式

1 个答案: