我使用Webpack’s local scope创建了作为其所属组件范围的CSS类。
我有一个<Icon />
React组件,如下所示:
Icon.js
'use strict';
var React = require('react')
var styles = require('./Icon.css')
module.exports = React.createClass({
propTypes: {
iconName: React.PropTypes.string.isRequired,
height: React.PropTypes.number,
width: React.PropTypes.number,
classes: React.PropTypes.string
},
getDefaultProps() {
return {
iconName: 'cloud',
height: 36,
width: 36,
classes: ''
};
},
render() {
var iconSize = {
height: this.props.height + 'px',
width: this.props.width + 'px'
}
return (
<i className={this.props.classes + ' ' + styles[this.props.iconName]} style={iconSize} />
)
}
})
...使用CSS看起来像这样:
Icon.css
.base {
background-position: center;
background-repeat: no-repeat;
display: block;
left: 0;
position: absolute;
top: 0;
}
.cloud {
composes: base;
background-image: url("./images/cloud.svg");
transform: translate3d(0, -12px, 0);
}
.apps {
composes: base;
background-image: url("./images/apps.svg");
transform: translate3d(0, -11px, 0);
}
我将其拉入另一个名为<Capsule />
的组件中,我需要以<Capsule />
组件特定的方式对其进行定位。
Capsule.js
'use strict';
var React = require('react')
var styles = require('./Capsule.css')
var Icon = require('../Icon/Icon.jsx')
module.exports = React.createClass({
propTypes: {
clickable: React.PropTypes.bool.isRequired,
iconName: React.PropTypes.string,
label: React.PropTypes.string,
cta: React.PropTypes.string
},
getDefaultProps() {
return {
clickable: true,
iconName: '',
label: '',
cta: ''
};
},
render() {
return (
<div className={styles.withIcon}>
{this.props.iconName ? <Icon classes={styles.icon} iconName={this.props.iconName} /> : ''}
{this.props.label ? <span className={styles.label} dangerouslySetInnerHTML={{__html: this.props.label}} /> : ''}
{this.props.children}
{this.props.cta ? <span className={styles.cta}>{this.props.cta}</span> : ''}
</div>
)
}
})
Capsule.css
.icon {
left: 31px;
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
.base {
background-color: white;
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
box-sizing: border-box;
color: rgb(114, 110, 101);
font-size: 11px;
margin-top: 24px;
min-height: 54px;
padding: 20px;
position: relative;
}
.base + .base { margin-top: 8px; }
.clickable {
composes: base;
cursor: pointer;
}
.withIcon {
composes: base;
padding-left: 62px;
}
.label {}
.cta {
color: rgb(216, 213, 210);
}
您将看到我在<Icon />
组件中呈现<Capsule />
组件,并且我已经传入classes
道具。这是因为我需要使用.icon
中的本地范围Capsule.css
类来将<Icon />
正确定位在<Capsule />
内。它现在工作得很好,但我不太确定这是理想的,甚至是正确的方法。
结果截图:
改善建议?非常感谢我能得到的任何帮助。