СВЯЗАННЫЙ ВОПРОС НАД: Стили перезаписываются стилем Material-UI
Я создаю библиотеку компонентов поверх UI материала. Используя JSS, я хотел бы иметь возможность передавать стили своим пользовательским компонентам. Однако у меня возникают проблемы с тем, что корневые стили material-ui имеют более высокую специфичность, чем то, что я передаю. Я попытался перезаписать стили по умолчанию компонентов material-ui синтаксисом classes
, но он просто создает другой класс с аналогичным именем и более высокая специфичность (makeStyles-root-51).
Потребление пользовательского компонента:
import React from 'react';
import {gSelect} from 'g-react-component-library/dist'
import {createUseStyles} from 'react-jss'
const useStyles = createUseStyles({
gSelect: {margin: "15px"},
example: {float: "left", display: "inline-block", whiteSpace: 'nowrap', verticalAlign: 'top'}
});
function App() {
const classes = useStyles();
return (
<div className={classes.example}>
<div className={classes.separator}>
<div>Selects:</div>
<gSelect default={1} classes={{gSelect: classes.gSelect}} callback={(e)=>{console.log(`${e} selected`)}} options={[1,2,3,4]}/>
<gSelect default={'One'} classes={{gSelect: classes.gSelect}} callback={(e)=>{console.log(`${e} selected`)}} options={["One", "Two", "Three", "Four"]}/>
</div>
</div>
);
}
export default App;
Фактический пользовательский компонент:
import React, {useState} from 'react';
import {Button, Select, FormControl, MenuItem, InputLabel} from '@material-ui/core'
import {makeStyles} from '@material-ui/styles'
import PropTypes from 'prop-types'
const gSelect = (props) => {
const [value, setValue] = useState();
const handleChange = event => {
props.callback(event.target.value);
setValue(event.target.value);
};
const useStyles = makeStyles({
select: {
border: 'solid #33333366 1px',
color: 'rgba(51, 51, 51, 0.66)',
fontWeight: '700',
backgroundColor: 'white',
outline: 'none',
borderRadius: '5px',
textAlign: 'left',
width: '300px',
position: 'relative',
},
root: {
}
});
const classes = useStyles(props);
return (
<FormControl classes={{root: classes.gSelect}}>
<InputLabel id="demo-simple-select-label">{props.default}</InputLabel>
<Select value={value} onChange={handleChange} className={classes.select}>
{props.options.map((option, index) => {
return <MenuItem key={`${option}_${index}`} value={option}>{option}</MenuItem>
})}
</Select>
</FormControl>
)
};
gSelect.propTypes = {
callback: PropTypes.func.isRequired,
options: PropTypes.array.isRequired,
default: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]).isRequired,
disabled: PropTypes.bool,
width: PropTypes.string
};
module.exports = {
gSelect
};
useStyles
внутри компонента, это противоречит цели. - person Adam   schedule 07.02.2020classes
должен проходить через реквизиты, и вы должны передать эти реквизиты в свой хук - материальный пользовательский интерфейс выполняет всю магию конкатенации, передаваемую в классах, в ваш собственный. Лично я предпочитаюwithStyles
hoc, потому что вся эта логика обрабатывается автоматически для вас, и вам не нужно беспокоиться о том, чтобы забыть передать свои реквизиты в хук useStyles. - person Adam   schedule 07.02.2020console.error
. На самом деле это это предупреждение. Пользовательский интерфейс Material предоставляет эти предупреждения, потому что они думают, что это вызвано тем, что разработчики не знают, что они делают (в большинстве случаев они правы). Но если вы знаете, как работает слияние классов, их можно игнорировать. Кстати, эта песочница должна показать вам, как это исправить: codeandbox.io/s/material- demo-udlfh - person Adam   schedule 11.02.2020className
, и это сработало. Я пробовал это изначально, но думаю, что из-за того, что я использовалcreateUseStyles
вместоmakeStyles
, это не сработало. Тем не менее, ваша помощь была действительно неоценимой, чтобы найти это решение, спасибо! Кроме того, я столкнулся с очень похожей, но другой проблемой и создал еще один вопрос. Я ни в коем случае не жду вашей помощи, но если вы хотите попробовать ее, будь моим гостем. Спасибо еще раз! stackoverflow.com/questions/60179584 / - person Jonny B   schedule 12.02.2020