использование пользовательских переменных или функций внутри makeStyle () - PullRequest
Новая
       37

использование пользовательских переменных или функций внутри makeStyle ()

0 голосов
/ 18 марта 2020

В настоящее время я работаю над компонентом 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

Заранее благодарен за любые предложения

...