react-mdlのヘッダー部分のcssを上書きできない件

Question

前提・実現したいこと

react-mdlによるヘッダーを使用した際、メニューバー部分だけ背景色を適用できなかったため、適用方法を教えていただきたいと思い投稿させていただきました。

問題のヘッダー

望まれるヘッダー

該当のソースコード

App.js

import React from 'react';
import {Layout, Header, Navigation,Drawer,Content} from 'react-mdl';


import Main from './components/main';
import {Link} from 'react-router-dom';
import './App.css';

function App() {
  return (
        <div style={{height: '300px', position: 'relative'}}>
    <Layout fixedHeader>
        <Header 
            className="header-color"
            title={<span>The Title</span>}>
            <Navigation>
                <a href="#">Link</a>
                <a href="#">Link</a>
                <a href="#">Link</a>
                <a href="#">Link</a>
            </Navigation>
        </Header>
        <Drawer title="Title">
            <Navigation>
                <a href="#">Link</a>
                <a href="#">Link</a>
                <a href="#">Link</a>
                <a href="#">Link</a>
            </Navigation>
        </Drawer>
        <Content />
    </Layout>
</div>
  );
}

export default App;

App.css

.header-color{
    background: #000046;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #1CB5E0, #000046);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #1CB5E0, #000046); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

試したこと

コンソール画面で該当部分のcssを見てみました。

すると、react-mdl適用により生成されたHeader要素内のメニューバーを構成するdiv要素に対して、標準でbackground-color:inherit;が適用されていました。

そのために今回の問題が起こってしまったと分かりました。

コンソール画面でみた該当箇所

<Header>
    <div aria-expanded="false" role="button" tabindex="0" class="mdl-layout__drawer-button">
        <i class="material-icons"></i>
    </div>

//省略

</Header>

.mdl-layout__header .mdl-layout__drawer-button {
    position: absolute;
    color: rgb(255,255,255);
    background-color: inherit;
}

そこで、App.css内で以下のコードを書き、React-mdlの標準で適用されているCSSを上書きしようと試みました。

1つめに試したこと

Header div:first-child{
    background-color: initial;
}

2つめに試したこと

.mdl-layout__header .mdl-layout__drawer-button {
    background-color: initial;
}

2つの方法を試してみたものの、上書きすることができませんでした。

分かる方がいれば教えていただけたらと思います。

Answer 1

こんにちは

お役に立てる回答になっているか、やや心もとないですが、create-react-app で作成したReactアプリのひな形に、ご質問に上げられているコードをコピペして、不要な import をコメントアウトしたり、material を使うためのimport やlink を追加したところ、ご質問にある

望まれるヘッダー

が表示されましたので、当方にて検証のために作成したコードと、参考にしたドキュメントを回答します。

作成したコードは以下に上げています。

• GitHub: jun68ykt/q205429

上記を動作確認するには、以下の手順

• git clone https://github.com/jun68ykt/q205429.git
• cd q205429
• yarn install
• yarn start

によって、以下の画面キャプチャのように表示されるかと思います。

作成したレポジトリで、material 関連のimportとlinkを追加したのは、以下のコミットです。

• jun68ykt/q205429: material 関連のimportとlink追加

上記コミットの修正については、以下を参考にしました。

• github.com/tleunen/react-mdl#create-react-app

以上、参考になれば幸いです。

Comments

[salmon_0511]

ご回答ありがとうございます。

git cloneしたコードをyarn startしてみたところ、確かに望まれるヘッダーが表示されました。

当方のコードに余計なことが書かれていないか、確認してみます。
ありがとうございました。

[jun68ykt]

どういたしまして。
参考にして頂き、多少なりとも解決のお役に立てましたら嬉しい限りです。