CSS hoverColorの指定について。

Question

material ui cardにて。

cardHeaderのtitleにカーソルがあった時に、リンクがあるため色を変えようと思い、このようにかいたのですが、

import React, { Component } from 'react'
import { Card, CardActions, CardHeader, CardText, CardTitle } from 'material-ui/Card'
import FlatButton from 'material-ui/FlatButton'
import { List } from 'material-ui/List'
import Dialog from 'material-ui/Dialog'
import Avatar from 'material-ui/Avatar'
import ChatIcon from 'material-ui/svg-icons/communication/chat-bubble-outline'
import Badge from 'material-ui/Badge'
import { withStyles } from 'material-ui/styles'

import Linkify from 'react-linkify'
import Timestamp from 'react-timestamp'

import firebase from 'firebase'

import CommentRef from './CommentRef'
import CommentForm from './CommentForm'


const myStyle = {
  title: {
    '&:hover': {
      background: '#E0F7FA',
      color:'white'
    },
    paddingTop:'0'
  }
}

class PostRef extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open:false,
      star:'',
      profile_image:'',
      postOpen:false,
    };
  }

  handleClose = () => {
    this.setState({open: false,postOpen:false});
  }

  onCommentFncOpen = () => {
    this.setState({open:true})
  }

  handleCommentSubmit = (val) =>{
    this.writeNewComment(val)
  }

  handlePostOpen = () => {
    this.setState({postOpen:true})
  }

  writeNewComment(val){
    const self = this
    var newCommentKey = firebase.database().ref().child('comments').push().key

    firebase.database().ref('posts/' + self.props.post.postId + '/postComment').once("value").then(function(snapshot) {
      const postCommentData = snapshot.val()
      var commentData = {
        author: self.props.author,
        uid: self.props.myuid,
        body: val,
        commentId: newCommentKey,
        profile_image:self.props.profile_image,
      }
      var updates = {}
      updates['/comments/' + newCommentKey] = commentData
      updates['posts/' + self.props.post.postId + '/postComment/commentCount/'] = postCommentData.commentCount+1
      updates['posts/' + self.props.post.postId + '/postComment/comments/' + newCommentKey]= true
      console.log(updates)
      return firebase.database().ref().update(updates);
    })
    this.setState({open:false})
  }

  fetchPostsData(){
    const self = this
    const userId = this.props.post.uid
    firebase.database().ref('/users/'+userId).once('value',function(snapshot) {
      self.setState({
        profile_image:snapshot.val().profile_image,
        star:snapshot.val().userStar.starCount,
        })
    })
  }

  componentDidMount(){
    this.fetchPostsData()
  }

  render(){
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleClose} />,]
    return(
      <Card style={{
          width:'300px',
          display: 'inline-block',
          marginRight:'10px',
          verticalAlign: 'top',}} >
        <CardHeader
          title={
            <div>
              <Badge
                badgeContent={this.state.star}
                secondary={true}
                badgeStyle={{top: 12, right: 12,fontSize:1}}
                >
                <Avatar src={this.state.profile_image} />
              </Badge>
              {this.props.post.author}
            </div>
          }
          style={{
            height:'70px',
            cursor: 'pointer',
            paddingTop:'0',
            verticalAlign:'top'
          }}
          classes={{ title: this.props.classes.title }}
          onClick={() => this.props.herfUserPage(this.props.post.uid)} />
        <CardTitle title={this.props.post.title}
                   subtitle={
                     <Timestamp time={this.props.post.timestamp/1000} format='full' includeDay/>
                   }
                   titleStyle={{
                     paddingTop:'0',
                     marginTop:'-20'
                   }}/>
        <CardText style={{
                    paddingTop:'0',
                  }}
                  onClick={this.handlePostOpen}
                  >
          <Linkify>  {this.props.post.body} </Linkify>
          <br />
          <p style={{
            textAlign:'center'
          }}>
          <img  src={this.props.post.post_image}
                alt=""
                style={{
                  objectFit:'cover',
                  width:'270px',
                  hight:'270px',}}></img>
          </p>
        </CardText>
        <CardActions style={{
                      paddingTop:'0',
                      }}>
          <FlatButton
            secondary
            label="Comment"
            onClick={this.onCommentFncOpen} />
        </CardActions>

        <CardHeader showExpandableButton
                    title={ <Badge  badgeContent={this.props.post.postComment.commentCount}
                                    primary={true}
                                    badgeStyle={{fontSize:1,top: 12, right: 12}}  >
                              <ChatIcon style={{size:'10px'}}/>
                            </Badge> }
                    style={{
                        paddingTop:'0',
                        marginTop:'-10',
                        marginBottom:'-25'
                    }}/>
        <List expandable>
          <CommentRef postId={this.props.post.postId} uid={this.props.post.uid}/>
        </List>

        <Dialog title="write comment"
                actions={actions}
                modal={false}
                open={this.state.open}
                onRequestClose={this.handleClose}  >
          <CommentForm onSubmit={this.handleCommentSubmit.bind(this)}/>
        </Dialog>

        <Dialog title={this.props.post.title}
                actions={actions}
                modal={false}
                open={this.state.postOpen}
                onRequestClose={this.handleClose}  >
          <div style={{
                      paddingTop:'0',
                    }} >
            <Linkify>  {this.props.post.body} </Linkify>
            <br />
            <p style={{
              textAlign:'center'
            }}>
            <img  src={this.props.post.post_image}
                  alt=""
                  style={{
                    objectFit:'cover',
                    width:'100%',
                    hight:'100%',}}></img>
            </p>
          </div>
        </Dialog>
      </Card>
    )}

}
export default withStyles(myStyle)(PostRef)

これでは色を変えることができません。どこで間違えてますでしょうか？

Answer 1

material-ui v1.0 なら、js上でホバー時などのスタイルを与えることができます。

Overriding with classes

(右の"<>"を押すとソースが見れる)

v1.0 からは JSS というのを使っているらしく、それにより js の中でホバー時などのスタイルを指定できるみたいです。

const myStyle = {
  title: {
    '&:hover': {
      background: 'black'
    },
    background: 'white'
  }
}

このスタイルオブジェクトをwithStylesで inject し、CardHeaderの方でtitleのclassを override すればOKです。

CardHeader - CSS API

        <CardHeader 
          classes={{ title: this.props.classes.title }}
          title="This is a pen"
        />

Demo
Decoratorを使ってますが使う必要はありません。

Comments

[karamarimo]

そもそもですが、hoverBackgroundColor という css property は存在しないと思います。

[MOTOMUR]

こちらでもお世話になって申し訳ないです。
回答ありがとうございます。一つ躓いてしまったのですが、デコレータを使える仕様ではないのでどのように導入しようか困っています。

const myStyle = {
title: {
'&:hover': {
background: '#E0F7FA',
color:'white'
},
paddingTop:'0'
}
}

@withStyles(myStyle)
class PostRef extends Component {

これの＠の部分はどのように変えたら良いでしょうか。

[karamarimo]

https://material-ui-next.com/customization/overrides/#overriding-with-classes
ここのページにあるように、
withStyles(styles)( <コンポーネント> )
の返り値をコンポーネントとして使用すればいいです。

export するなら
export default withStyles(myStyle)(PostRef)
です。

[MOTOMUR]

申し訳ありません。現在使用しているmaterial uiのバージョンが0.19.4(http://www.material-ui.com/#/get-started/usage)でございまして。１.００の導入を検討し、頑張ってみたのですが、AppBarのmaterialui自身のjsファイルにエラーが出たため、挫折してしまいました。
０.１９.４ではどのようにしたら良いでしょうか？

[karamarimo]

できないことはないと思います。どのようなエラーですか？

[MOTOMUR]

TypeError: Object(...) is not a function
./src/views/components/PostRef.js
src/views/components/PostRef.js:212
209 | )}
210 |
211 | }
> 212 | export default withStyles(myStyle)(PostRef)
このようなエラーです

[karamarimo]

withStyles の import はしましたか？
import { withStyles } from 'material-ui/styles';

[MOTOMUR]

行いました。

[karamarimo]

ではコード全体を載せてもらえますか(質問文に)？

[MOTOMUR]

載せさせていただきました。

[karamarimo]

material-ui v1.0.0 では api が少し変わったりしてます(CardTitle, CardText
の削除など)ので、そのままのコードでは動きません。

乗り換えるのが面倒なら、CardHeader 全体にスタイルを適用すればいいです。

そもそも CardHeader の title 部分だけにホバー時のスタイルを追加したいのか、CardHeader 全体なのか、どちらでしょうか。

後者ならCardHeader に className プロパティで自由にクラス名を付けることができますので、外部の css でその スタイルを指定すればいいです。

[MOTOMUR]

なるほど、今までやったことのないstyleの指定の仕方なので、いまいちイメージできないのですが、とってもシンプルなデモいただけますでしょうか・・

[karamarimo]

確か react-scripts でビルドしてましたよね？
こちらを見ていただければわかると思います。
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet

[MOTOMUR]

.PushableCardHeader{
paddingTop:0,
marginTop:-10,
marginBottom:-25,
'&:hover': {
background: #E0F7FA;
color:white;
};
}
このようにCSSを記述し、
<CardHeader showExpandableButton
title={ <Badge badgeContent={this.props.post.postComment.commentCount}
primary={true}
badgeStyle={{fontSize:1,top: 12, right: 12}} >
<ChatIcon style={{size:'10px'}}/>
</Badge> }
className="PushableCardHeader"/>

このようにスタイルを指定したのですが、これでは背景色が変わりません。

CSSの文法が未熟なので、そこが間違っているのかなと思っていますが。。。

どのように直したらいいでしょうか？

また、このようにスタイルを指定してもwithStyleは必要でしょうか？（なしで動かしています。）

[karamarimo]

それはCSSではないですね...。
ご自分で勉強してくださいとしか言いようがないですが、訂正だけするとこうです。
https://pastebin.com/wHR5dL4z

> このようにスタイルを指定してもwithStyleは必要でしょうか？

material-ui 0.* には withStyles は存在しません。

[MOTOMUR]

普通に勘違いしてました。お騒がせしました。ありがとうございます

[karamarimo]

コードを質問文に載せてもらえますか？

[MOTOMUR]

勘違いで下側にクラスネームを入れておりました。。。

hoverが不自然なので、もう少し枠を小さく色をつけたいのですが、そのようなことは可能でしょうか？
全域の枠になってしまっているので、内側の枠に調整したいのですが。

[karamarimo]

強引ですが、CardHeaderの中身はこのようになっているので、
https://imgur.com/a/VCQ8Z
(<div style="padding: 16px; ..."> が CardHeader の root
subtitle ではなく title だけにしたいなら
.PushableCardHeader > div > span:first
とすればいいのではないでしょうか。

[MOTOMUR]

ありがとうございます。申し訳ないですが、CSSの記述の知識は赤子のような状態でして、理解できないです。
CardHeaderの中身が
<CardHeader>
<div>
<span>
</span></div></CardHeader>
となっているってことでしょうか？

[karamarimo]

いえ、画像を見ていただければわかると思いますが、
<div><div><span></span></div></div>
となっています。DOM tree において実際に <CardHeader> という要素は存在しません。

.PushableCardHeader > div > span:first-child
(さきほどは間違えましたが :first ではなく :first-child でした)
は .PushableCardHeader の子要素 div の1番目の子要素 span という意味です。
今、root の div に PushableCardHeader クラスがついているので、これで Title にあたる要素を選ぶことができます。

[MOTOMUR]

それを実現するにはcssを
.PushableCardHeader div span{
}
とすればいいってことですね！

だいぶ理解できました。ありがとうございます！
CSSではなく機能で困ってしまったので、あちらでまたお世話になります。。。
長らくお答えありがとうございました！

[karamarimo]

いえ、
.PushableCardHeader > div > span:first-child { ... }
というつもりだったんですが...。

.PushableCardHeader div span
だと subtitle の方にも適用されてしまうのでは？

[MOTOMUR]

.PushableCardHeader {
margin: 5px;
}
.PushableCardHeader div {
vertical-align:middle;
margin-left: -3px;
margin-top: -3px;
}

.PushableCardHeader div span{
height:30px;
cursor: pointer;
}

.PushableCardHeader:hover{
background: rgba( 0 , 151 , 167 ,0.3);
color: white;
display: block;
transition: 1.0s ;
margin: 5px;
/*枠を丸く*/
border-radius: 3px; /* CSS3草案 */
-webkit-border-radius: 3px; /* Safari,Google Chrome用 */
-moz-border-radius: 3px; /* Firefox用 */
}

subtitleも含めて選択したかったので、こちらのようにしました。

spanの中身を指定するにはspan:first-childとすればできるのですね、勉強になります。
他の要素の場合second-childだったりするんですかね？

丁寧にありがとうございます。

[karamarimo]

> spanの中身を指定するにはspan:first-childとすればできるのですね

:first-child は親から見て１番目の子要素である ということです。
first-child, last-child 以外は nth-child で指定することになります。
http://www.htmq.com/selector/nth-child.shtml

[MOTOMUR]

ありがとうございます！