В настоящее время я работаю над компонентом React Material Ui.
В настоящее время цель состоит в том, чтобы иметь возможность изменять стиль JSS в соответствии с какой-либо пользовательской функцией или значениями в другой части приложения, без необходимости добавлять / удалять классы
Это мои текущие настройки:
stepControl. js
const stepControl = () => {
const [activeStep, setActiveStep] = useState(0)
const [completed, setCompleted] = useState(new Set())
const [stepCount, setStepCount] = useState(0)
const completedSteps = () => {
return completed.size
}
const totalSteps = () => {
return stepCount
}
const allStepsCompleted = () => {
return completedSteps() === totalSteps()
}
return {
state: {
activeStep,
completed
},
actions: {
totalSteps,
completedSteps,
allStepsCompleted,
setActiveStep,
setCompleted,
setStepCount
}
}
}
export default stepControl
index.styles. js
import { makeStyles } from '@tim/functional'
import stepControl from './stepControl.js'
const useStyles = () => {
const { state, actions } = stepControl()
return makeStyles(theme => ({
root: {
width: '70%',
margin: 'auto',
'& .MuiPaper-root': {
backgroundColor: 'transparent'
},
'& .MuiStepConnector-lineHorizontal': {
borderTopWidth: 6,
borderRadius: 1,
marginTop: -2,
borderColor: actions.allStepsCompleted()
? theme.palette.primary
: rgba(0, 0, 0, 0.24)
}
},
button: {
marginRight: theme.spacing(1)
},
backButton: {
marginRight: theme.spacing(1)
},
completed: {
display: 'inline-block',
'& .MuiStepConnector-lineHorizontal': {
borderTopWidth: 6,
borderRadius: 1,
borderColor: theme.palette.primary
}
},
instructions: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1)
}
}))
}
export default useStyles
В настоящее время я получаю слишком много ошибок повторного отображения, даже если я просто возвращаю фиксированное значение в рассматриваемой функции allStepsCompleted () . Как бы я go сделал это в Material Ui?
Я бегу:
- Реагирует 16,9
- Mui 4.9.5
- на сервер webpack 4.4 на macOS 10.15
Заранее благодарен за любые предложения