javascript - 自定义 React 组件样式被 Material-UI 样式覆盖
问题描述
相关问题:样式被 Material-UI 样式覆盖
我在 Material UI 之上创建了一个组件库。使用 JSS,我希望能够将样式传递给我的自定义组件。但是,我遇到了 Material-ui 的根样式比我传入的具有更高特异性的问题。我尝试使用classes
语法覆盖 material-ui 组件的默认样式,但它只是创建了另一个具有相似名称和更高名称的类特异性(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
};
解决方案
你这样做是错的。GSelect
应该收到这样的课程:
在应用程序中:
<GSelect default={1} classes={{gSelect:classes.gSelect}} callback={(e)=>{console.log(`${e} selected`)}} options={[1,2,3,4]}/>
然后在GSelect
:
const useStyles = createStyles(...your styles); // call this hook factory outside your render
const GSelect = props => {
const classes = useStyles(props) <- props contains an object called classes with a property gselect that gets merged into yours
<Select value={value} onChange={handleChange} classes={{root:classes.gSelect}}>
}
编辑:至于我关于在组件之外创建钩子的原始评论,我的意思是这样做:
// move this outside of your render
const useStyles = createUseStyles({
gSelect: {margin: "15px"},
separator: {marginTop: "15px"},
example: {float: "left", display: "inline-block", whiteSpace: 'nowrap', verticalAlign: 'top'}
});
function App() {
// use it inside of your render
const classes = useStyles();
...
}
通读本节和以下两节,过一会就会点击:https ://material-ui.com/styles/advanced/#overriding-styles-classes-prop
推荐阅读
- c# - 在 MVVM 中,我有一些 DataTable 作为数据源。我应该添加新模型来集中它们吗?
- kdb - kdb passing column names into functions
- java - 数据库不使用重载方法保存值
- azure - 将 SymmetricDS 与 Azure SQL 数据库一起使用时的权限问题
- python - pycharm中的“预期语句结束”
- google-chrome - Chrome 开发工具标尺无法响应
- c# - 限制数组大小 2D (C# UNITY)
- javascript - 如何在 Angular Material V6 中列出国际电话号码?
- jwt - 将 koa-jwt 与 koa-router 一起使用
- docker - Amazon 弹性容器服务 - 等效于 ECS 的 Kubernetes 活性/就绪性检查