Я использую Material UI и хочу стилизовать компонент, используя несколько имен правил с помощью API стиля.
Допустим, я хочу оформить компонент FormLabel синим цветом, а звездочку (обязательно) — красным.
С Hook API я бы сделал что-то вроде этого:
import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import MuiFormLabel from '@material-ui/core/FormLabel'
const useStyle = makeStyles({
root: {
color: 'blue'
},
asterisk: {
color: 'red'
},
})
const FormLabel = ({ children }) => {
const classes = useStyle()
return (
<MuiFormLabel
classes = {{
root: classes.root,
asterisk: classes.asterisk
}}
>
{children}
</MuiFormLabel>
)
}
Могу ли я передать root
AND asterisk
моему компоненту с помощью API стилей?
Я пробовал это, но это не работает
import React from 'react'
import { styled } from '@material-ui/core/styles'
import MuiFormLabel from '@material-ui/core/FormLabel'
const StyledFormLabel = styled(MuiFormLabel)({
'.MuiFormLabel-root': {
color: 'blue'
},
'.MuiFormLabel-asterisk': {
color: 'red'
},
})
const FormLabel = ({ children }) => (
<StyledFormLabel>{children}</StyledFormLabel>
)
Ниже приведен пример правильного синтаксиса. По умолчанию ключи верхнего уровня в объекте, переданном styled
, считаются именами свойств CSS. Добавление &
в начале ключа позволяет styled
узнать, что вы определяете вложенное правило. .MuiFormLabel-root
необязателен, так как свойства будут применяться по умолчанию на корневом уровне (например, color: "blue"
в приведенном ниже примере). &
является ссылкой на класс корневого уровня, поэтому & .MuiFormLabel-asterisk
нацелен на дочерние элементы с классом MuiFormLabel-asterisk
.
import React from "react";
import { styled } from "@material-ui/core/styles";
import MuiFormLabel from "@material-ui/core/FormLabel";
const StyledFormLabel = styled(MuiFormLabel)({
color: "blue",
"&.Mui-error": {
color: "purple"
},
"& .MuiFormLabel-asterisk": {
color: "green"
},
"& .MuiFormLabel-asterisk.Mui-error": {
color: "red"
}
});
const FormLabel = ({ children }) => (
<>
<StyledFormLabel required>{children}</StyledFormLabel>
<br />
<StyledFormLabel error required>
{children}
</StyledFormLabel>
</>
);
export default FormLabel;
Ха! Спасибо @Rajiv. Да, я ответила на несколько за последние пару лет.
Райан Когсуэлл, я твой большой поклонник. где вопрос Material-UI, там и вы и ваш ответ.... 😅