ReactインラインスタイルとクライアントのCSSとの衝突

Question

クライアントページにアプリケーションを読み込む必要があります。私たちはReactを使ってそれらを構築しています。そこで、スタイルをオブジェクトとして定義することでインラインスタイルを使用しています。しかし、我々は問題に遭遇した。クライアントがタグ属性を使用して任意のCSSを指定したとき。インラインで決して定義しなかったプロパティーは、クライアントcssのタグ属性で使用されるプロパティーを取得します。

以下のコードは、私たちがnavbarに使用した反応インラインスタイルです。

var style = { 
navigation: { 
    minWidth: '50px ', 
    position: 'relative ', 
    marginBottom: '20px ', 
    border: '1px solid transparent ' 
}, 
}; 
render function() { 
return(<nav style={style.navigation}> ...... </nav>); 
} 

クライアント側では、彼はnavbarを定義するためにstyleタグ属性を使用しています。このような場合には

nav{height:40px;} 

、クライアントによって定義されたNAV属性はまた、当社のインラインスタイリングに加えて、多くの問題を引き起こしています。

もっと良い解決策を提案してください。この場合、Resetクラスを使用するのが唯一の解決方法です ??

Answer 1

クライアントのCSSの影響を受けるCSSスタイルをコンポーネント内でリセットする必要があります。これを行う1つの方法は、CSS all propertyを使用することです。

CSSのすべての短縮形プロパティは、Unicode-bidiおよびdirection以外のすべてのプロパティを初期値または継承値にリセットします。

このソリューションの問題は、IEまたはEdgeではサポートされていません。allです。

var style = { 
    navigation: { 
    all: 'initial', 
    minWidth: '50px ', 
    position: 'relative ', 
    marginBottom: '20px ', 
    border: '1px solid transparent ' 
    }, 
}; 

render function() { 
    return(<nav style={style.navigation}> ...... </nav>); 
} 

ここでこの動作の例です - せず、他のCSS all: initialプロパティを使用して、いずれかを同じ<Nav />コンポーネントを示します。これまで述べたように、Internet ExplorerやEdgeでは動作しません。

class Nav extends React.Component { 
 
    render() { 
 
    var style = { 
 
     navigationWithAll: { 
 
     all: 'initial', 
 
     border: '1px solid red' 
 
     }, 
 
     navigation: { 
 
     minWidth: '50px ', 
 
     position: 'relative ', 
 
     marginBottom: '20px ', 
 
     border: '1px solid red' 
 
     } 
 
    }; 
 

 
    return (
 
     <div> 
 
     <nav style={style.navigation}>Navigation</nav> 
 
     <nav style={style.navigationWithAll}>Navigation</nav> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Nav />, 
 
    document.getElementById('app') 
 
);

nav { 
 
    height: 100px; 
 
    background-color: gray; 
 
    font-family: "Comic Sans MS"; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="app"></div>

あなたはおそらくそうであるIEまたはエッジを、サポートする必要がある場合は、継承されている特定のCSSプロパティをリセットする必要があります。これは、次のような単純なもので行うことができます。

styles = { 
    navigation: { 
    height: 'initial' 
    } 
} 

が、すべてのクライアントのサイト間で機能するであろう、より堅牢なソリューションでは、CSSコンポーネントのリセットをインポートすることです。

reset = { 
    margin: 'initial', 
    padding: 'initial', 
    height : 'auto', 
    height: 'initial', 
    width: 'auto', 
    // any other properties you want to reset, or a full list of CSS properties to reset to initial/auto 
    } 
} 

は、その後、それは明らかに、これらのCSSを取り上げる

import reset from 'reset' 

styles = { 
    navigation: { 
    ...reset, 
    border: 1px solid red, 
    // your custom styles 
    } 
}