У меня сейчас есть функциональный компонент (без состояния). В этом компоненте у меня есть несколько функций рендеринга, которые вызываются внутри этого компонента. Хотя сам компонент имеет доступ к объекту classes
через свои свойства, мне нужны стили в этом объекте внутри функций рендеринга, объявленных снаружи.
Вот структура моего компонента без сохранения состояния
// MyComponent.js
import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import myStyles from "../mystyles.js"
function MyComponent(props) {
const { classes } = props;
return <div className={classes.someClass}>
...
</div>
}
export withStyles(myStyles)(MyComponent)
Как мне использовать мой classes
внутри другой функции рендеринга, присутствующей в том же файле?
// MyComponent.js
const renderSomething = () => {
// This is not working
return <div className={myStyles.someClass}></div>
}
К вашему сведению: я не хочу передавать classes
в эту renderSomething
функцию в основном компоненте . Я хочу иметь возможность использовать классы без их передачи, так как мы уже импортируем myStyles
.
Редактировать 1: я попытался применить класс как атрибут стиля, но это все еще не применяет медиа-запросы