相关疑难解决方法(0)

index.js

import React from 'react'
import TextField from '@material-ui/core/TextField'
import style from './style'
import withStyles from 'hoc/withStyles'
import { connect } from 'react-redux'

class SearchField extends React.Component {
  constructor (props) {
    super(props)
    this.onChange = this.onChange.bind(this)
  }

  onChange (event) {
    const { dispatcher } = this.props
    this.props.dispatch(dispatcher(event.target.value))
    event.preventDefault()
  }

  render () {
    const { classes, placeholder } = this.props
    return (
      <TextField 
        label={placeholder} 
        placeholder={placeholder}
        InputProps={{ classes: { input: classes.resize } }}
        className={classes.textField}
        margin="normal"
        autoFocus={true} 
        variant="outlined" 
        onChange={this.onChange}
      />
    )
  }
}

export …

快速说明：这不是如何更改 Material UI React 输入组件的轮廓颜色的副本？

使用 material-ui (React) 我无法删除悬停或聚焦时的轮廓。我使用这个输入的原因是在出现警告时请求添加一个小的红色边框。我可以更改聚焦和悬停样式。这在下图中进行了测试：

输入焦点时应用此 CSS 的位置：

outlinedInputFocused: {
     borderStyle: 'none',
     borderColor: 'red',
     outlineWidth: 0,
     outline: 'none',
     backgroundColor: 'green'
  },

成分

 <OutlinedInput
            disableUnderline={true}
            notched={true}
            id="adornment-weight"
            classes={{root: classes.outlinedInput, focused: classes.outlinedInputFocused}}
            value={this.state.budgetValue}
            onChange={evt => this.updateBudgetValue(evt)}
            onKeyPress={evt => this.handleKeyPress(evt)}
            endAdornment={<InputAdornment sposition="end">BTC</InputAdornment>}
          />

如您所见，图像的颜色为绿色，但仍有轮廓。即使outlineWidth 为0 并且在CSS 中将outline 设置为none。如何更改/禁用此大纲？

我正在使用React，带有JSS的Material UI和React Router。

我想<NavLink>加入一个活动类，如：

<NavLink to={'/dashboard'} activeClassName={classes.active}
 <button className={classes.btn}>Link</button>
/>

该类可以很好地添加到父级中，但是如果是子类，则在将样式应用于子级按钮时遇到问题。定位元素时，它起作用，但不适用于类。

我已经研究过使用嵌套的JSS，但这仍然行不通。有任何想法吗？

  active: {
    '& .btn': { // This doesn't work
      backgroundColor: '#2A354F'
    },
   '& button': { // This works
      backgroundColor: '#2A354F'
    }  
  }

你好，我遇到了一个问题，我无法覆盖在选择菜单项时显示正确样式的类：这是我的代码：

       <MenuItem component={Link} to="/Acceuil" 
        className={{root:classes.menuItem ,selected:classes.selected}} 
           selected={pathname === "/Acceuil"} >
              <ListItemIcon>
                  <Icon className={classes.icon} >
                      insert_drive_file
                   </Icon>
               </ListItemIcon>
            Gestion Commandes
        </MenuItem>

这是类 const ：

      Const classes = theme => ({
       menuItem: {
         fontStyle:'bold',
         backgroundColor: 'white',
         width: '88%',
      '&:active':{
        borderLeft: '4px solid #51bcda',
        backgroundColor: "-webkit-box-shadow: 6px 4px 53px -7px 
        rgba(0,0,0,0.75), -moz-box-shadow: 6px 4px 53px -7px 
        rgba(0,0,0,0.75),   box-shadow: 6px 4px 53px -7px 
        rgba(0,0,0,0.75),",
        },
       selected:{
       backgroundColor:'red !important' 
       } 
       });

谢谢你帮助我^^