使用材质UI主题属性设置React的样式

Question

我一直在React中使用Material ui主题作为样式组件。现在，我们的应用程序中有一个要求，即使用高图表。但我仍然想在高排行榜上保留同样的主题。有没有一种方法可以将Material UI主题集成到高图表的样式中？我在谷歌上搜索了很多，最后决定在这里提出这个问题。我知道高线图提供了自己的主题。但我不想让多个主题的代码变得更混乱。有没有办法以更清洁的方式实现这一点？任何帮助都将不胜感激。提前感谢！

Answer 1

Highcharts可以通过Highcharts.setOptions设置主题，以创建适合您的模式。您可以看到，该材质UI的图表元素有特定的集合，它不会改变图表的外观。https://www.highcharts.com/docs/chart-design-and-style/themes#creating-您自己的主题

// set the theme
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
alternateGridColor: null,
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
credits: {
style: {
right: '10px'
}
},
labels: {
style: {
color: '#99b'
}
}
});