私のReactアプリでは、スタイリングにReactJSSを使用しています。これらの2つのファイルがあるとします（インポートと別の興味深いものをスキップします）。
これはApp.jsです：
const styles = {
root: {
backgroundColor: '#ffffff',
},
header: {
backgroundColor: '#ff0000',
}
};
class App extends Component {
render() {
const { classes } = this.props;
return (
<div className={classes.root}>
<Header classes={{ root: classes.header }}/>
</div>
);
}
}
export default withStyles(styles)(App);
これはHeader.jsです：
const styles = theme => ({
root: {
backgroundColor: '#0000ff',
padding: '1em',
},
});
class Header extends Component {
render() {
const { classes } = this.props;
return (
<header className={classes.root}>
Hello header
</header>
);
}
}
export default withStyles(styles)(Header);
私が欲しいのは、ヘッダーのルートコンポーネントのスタイルを完全に上書きせずに「オーバーライド」することです。私は2つのことのどちらかを行うことができます：
使用し<Header className={classes.header}/>た結果で、header要素のクラスを有するApp-root-0-1-2背景がパディングを有する青色であることを意味し、。
<Header classes={{ root: classes.header }}/>（上記のように）を使用するheaderと、クラスを持つ要素が生成されApp-header-0-1-2ます。これは、背景がパディングなしで読み取られることを意味します。
コンポーネントによって定義されたスタイル、または親がそれをオーバーライドするために定義したスタイルのいずれかしか持てないようです。ただし、内部スタイルを親から渡されたスタイルで拡張したいと思います。もちろん、競合では親が優先されます。この場合、パディング付きの赤い背景が必要です。
どうすればそれを達成できますか？それは不可能ですか？編集可能なスタイルをプロパティとして渡す必要がありますか？
外部クラス名を指定し、クラス名（https://github.com/JedWatson/classnames）を使用して（または単にインライン化して）、このクラス名が存在する場合は条件付きでレンダリングできます。
import classNames from "classnames";
const styles = theme => ({
root: {
backgroundColor: '#0000ff',
padding: '1em',
},
});
class Header extends Component {
render() {
const { classes, className } = this.props;
return (
<header
className={classNames({
[classes.root]: true,
[className]: className
})}>
Hello header
</header>
);
}
}
export default withStyles(styles)(Header);
次にそれを使用します：
<Header className={classes.myParentClass} />
これにより、クラス名が作成されます。 Header-root-0-1-2 App-myParentClass-0-4-3
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加