質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.35%

  • JavaScript

    11205questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    3871questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Material-UI

    13questions

CSS hoverColorの指定について。

解決済

回答 1

投稿 2017/11/20 11:27 ・編集 2017/11/21 19:39

  • 評価
  • クリップ 0
  • VIEW 108

MOTOMUR

score -31

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)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

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

CardHeader - CSS API

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

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

投稿 2017/11/20 18:45

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/20 18:56

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

    キャンセル

  • 2017/11/21 00:38

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

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

    @withStyles(myStyle)
    class PostRef extends Component {

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

    キャンセル

  • 2017/11/21 01:42

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

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

    キャンセル

  • 2017/11/21 15:00

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

    キャンセル

  • 2017/11/21 15:12

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

    キャンセル

  • 2017/11/21 15:34

    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)
    このようなエラーです

    キャンセル

  • 2017/11/21 16:19

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

    キャンセル

  • 2017/11/21 18:27

    行いました。

    キャンセル

  • 2017/11/21 18:58 編集

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

    キャンセル

  • 2017/11/21 19:40

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

    キャンセル

  • 2017/11/21 20:32

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

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

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

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

    キャンセル

  • 2017/11/21 20:44

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

    キャンセル

  • 2017/11/21 21:25

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

    キャンセル

  • 2017/11/22 13:53

    .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は必要でしょうか?(なしで動かしています。)

    キャンセル

  • 2017/11/22 16:26

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

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

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

    キャンセル

  • 2017/11/22 16:50 編集

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

    キャンセル

  • 2017/11/22 16:53

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

    キャンセル

  • 2017/11/22 17:11

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


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

    キャンセル

  • 2017/11/22 18:11

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

    キャンセル

  • 2017/11/22 18:38

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

    キャンセル

  • 2017/11/22 18:51

    いえ、画像を見ていただければわかると思いますが、
    <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 にあたる要素を選ぶことができます。

    キャンセル

  • 2017/11/23 23:59

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

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

    キャンセル

  • 2017/11/24 01:50

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

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

    キャンセル

  • 2017/11/24 09:49

    .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だったりするんですかね?

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

    キャンセル

  • 2017/11/24 14:22

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

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

    キャンセル

  • 2017/11/24 14:28

    ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.35%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11205questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    3871questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Material-UI

    13questions