web-dev-qa-db-ja.com

スタイル付きコンポーネント内のmaterial-uiボタンのホバー効果を無効にする方法

ボタンのホバー効果を無効にするためにcssホバープロパティを追加しましたが、私の場合はうまくいかないようです。どうすれば修正できますか？

import Button from 'material-ui/Button'
import styled from 'styled-components'

const StyledButton = styled(Button)`
  &:hover {
    background: none;
  }
`
export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton
      variant="raised"
      onClick={onClick}>
      login
    </StyledButton>
  )
}
cssreactjshovermaterial-uistyled-components
13
yuanlai

この問題を解決するには、インラインスタイルを追加します

export const SubmitButton = ({ onClick }) => {
  return (
    <StyledButton
      variant="raised"
      onClick={onClick}
      style={{ backgroundColor: 'transparent' }} >
      login
    </StyledButton>
  )
}
14
yuanlai

背景と同じ色に設定してみてください。

root = {
    backgroundColor: "#FFF"
    "&:hover": {
        //you want this to be the same as the backgroundColor above
        backgroundColor: "#FFF"
    }
}
11
Nishant Mehta