自定义React组件样式被Material-UI样式覆盖 [英] Custom React Component styles being overwritten by Material-UI style
问题描述
在以下位置的相关问题:
使用自定义组件:
import从'react'导入React;从'g-react-component-library/dist'导入{gSelect}从'react-jss'导入{createUseStyles}const useStyles = createUseStyles({gSelect:{margin:"15px"},例如:{float:"left",显示:"inline-block",whiteSpace:"nowrap",verticalAlign:"top"}});函数App(){const classes = useStyles();返回 (< div className = {classes.example}>< div className = {classes.separator}>< div>选择:</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 = {[一个",两个",三个",四个"]}/></div></div>);}导出默认应用程序;
实际的自定义组件:
从'react'导入React,{useState};从'@ material-ui/core'导入{Button,Select,FormControl,MenuItem,InputLabel}从'@ material-ui/styles'导入{makeStyles}从'prop-types'导入PropTypesconst gSelect =(props)=>{const [value,setValue] = useState();const handleChange =事件=>{props.callback(event.target.value);setValue(event.target.value);};const useStyles = makeStyles({选择: {边框:"solid#33333366 1px",颜色:'rgba(51,51,51,0.66)',fontWeight:"700",backgroundColor:白色",大纲:无",borderRadius:'5px',textAlign:'左',宽度:"300px",位置:相对",},根: {}});const classes = useStyles(props);返回 (< FormControl classes = {{root:classes.gSelect}}>< InputLabel id ="demo-simple-select-label"> {props.default}</InputLabel><选择value = {value} onChange = {handleChange} className = {classes.select}>{props.options.map((option,index)=> {return< MenuItem key = {`$ {option} _ $ {index}`} value = {option}> {option}</MenuItem>})}</选择></FormControl>)};gSelect.propTypes = {回调:PropTypes.func.isRequired,选项:PropTypes.array.isRequired,默认值:PropTypes.oneOfType([PropTypes.string,PropTypes.number]).是必须的,禁用:PropTypes.bool,宽度:PropTypes.string};模块.出口 = {g选择};
您做错了. GSelect
应该接收这样的类:
应用内:
< GSelect default = {1} classes = {{gSelect:classes.gSelect}} callback = {(e)=> {console.log(`$ {e} selected))}}选项= {[1,2,3,4]}/>
然后在 GSelect
中输入
const useStyles = createStyles(...您的样式);//在渲染器外部将此钩子称为工厂const GSelect = props =>{const classes = useStyles(props)<-props包含一个名为classes的对象,该对象的属性gselect已合并到您的对象中<选择value = {value} onChange = {handleChange} classes = {{root:classes.gSelect}}>}
至于我最初关于在组件外部创建钩子的评论,我的意思是:
//将其移出渲染器const useStyles = createUseStyles({gSelect:{margin:"15px"},分隔符:{marginTop:"15px"},例如:{float:"left",显示:"inline-block",whiteSpace:"nowrap",verticalAlign:"top"}});函数App(){//在渲染器中使用它const classes = useStyles();...}
通读本节和以下两个部分,过一会儿,它将单击:https://material-ui.com/styles/advanced/#overriding-styles-classes-prop
RELATED QUESTION OVER AT: Styles being overwritten by Material-UI style
I am create a component library on top of Material UI. Using JSS I'd like to be able to pass in styles to my custom components. However, I'm having issues with material-ui's root styles having higher specificity than what I'm passing in. I have tried overwriting the material-ui components default styles with the classes
syntax but it simply creates another class with a similar name and higher specificity (makeStyles-root-51).
Consuming Custom Component:
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;
The Actual Custom Component:
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
};
You're doing it wrong. GSelect
should receive classes like this:
In App:
<GSelect default={1} classes={{gSelect:classes.gSelect}} callback={(e)=>{console.log(`${e} selected`)}} options={[1,2,3,4]}/>
Then in 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}}>
}
EDIT: As for my original comment about creating your hook outside of your component, I meant do this:
// 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();
...
}
Read through this section and the following two, after a while, it'll click: https://material-ui.com/styles/advanced/#overriding-styles-classes-prop
这篇关于自定义React组件样式被Material-UI样式覆盖的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!