Переопределение материала Вкладка пользовательского интерфейса Индикатор эмоций в стиле
Попытка выяснить, как переопределить стили индикатора вкладок, используя стиль из Emotion. Я не уверен, как получить доступ к вложенным классам. Это то, что у меня есть, но оно меня туда не доставляет:
const StyledTabs = styled(Tabs)(
{
classes: {
indicator: {
background: 'black',
},
},
}
);Любая помощь будет потрясающей!
1 ответ
Есть пара вопросов. styled из Emotion поддерживает создание только одного имени класса для каждого использования. Он не оказывает никакой поддержки classes: {indicator: {styles}} структура в вашем примере.
Ниже приведен синтаксис, который позволяет использовать styled предоставить имя класса для "индикатора" класса Tabs:
const StyledTabs = styled(({ className, ...other }) => {
return <Tabs {...other} classes={{ indicator: className }} />;
})({
backgroundColor: "black"
});
Тем не менее, это не работает полностью надежно, потому что <style> Элемент для стилей эмоций не всегда появляется после <style> элементы из JSS (используются для стилей Material-UI) в <head> документа. Я не уверен, как изменить точку вставки для стилей Emotion, но вы можете прочитать здесь о том, как изменить точку вставки для JSS. Я включил этот подход в свою песочницу ниже.
Вот песочница, которая показывает эту работу:
Другой вариант синтаксиса - это следующий, который позволит вам управлять более чем одним классом Tabs:
const StyledTabs = styled(({ className, ...other }) => {
return <Tabs {...other} classes={{ root: className, flexContainer: "flexContainer", indicator: "indicator" }} />;
})({
"& .indicator": {
background: "black"
},
"& .flexContainer": {
flexDirection: "row-reverse"
}
});