【全栈React】第9天: 样式
没有样式的应用是不完整。我们将看看我们可以使用不同的方法来调整组件,从传统的CSS到内联样式。 通过这一点,除了将CSS类名附加到组件之外,我们还没有触及我们组件的样式。 今天,我们将花点时间去了解我们的React组件的样式,使它们看起来很棒,但仍然保持完整。 我们来看几种不同的方式来组合一个组件。
级联样式表(CSS)使用CSS来构造我们的Web应用程序是我们已经熟悉的一个实践,并不是什么新鲜事。 如果你以前曾经写过Web应用程序,那么你最有可能使用/编写了CSS。 简而言之,CSS是我们为实际标记之外的DOM组件添加样式的一种方式。 使用CSS与React不一样。 我们将在React中使用CSS,就像我们在_not_使用React时使用CSS一样。 我们将为组件赋值ids / classes,并使用CSS选择器来定位页面上的元素,让浏览器处理样式。 例如,我们来设计一下我们一直在使用的 假设我们想使用CSS将标题颜色变成橙色。 我们可以通过在我们的页面中添加一个样式表,并在CSS类中定位 回想一下,我们的 class Header extends React.Component { render() { // Classes to add to the <input /> element let searchInputClasses = ["searchInput"]; // Update the class array if the state is visible if (this.state.searchVisible) { searchInputClasses.push("active"); } return ( <div className="header"> <div className="fa fa-more"></div> <span className="title"> {this.props.title} </span> <input type="text" className={searchInputClasses.join(' ')} placeholder="Search ..." /> <div className="fa fa-search searchIcon"></div> </div> ) } } 我们可以通过在普通的css文件中定义一个 <link rel="stylesheet" type="text/css" href="styles.css"> 让我们填写 .header { background: rgba(251,202,43,1); } .header,.fa,.title,.searchIcon { color: #333333; } 首先关于CSS的最常见的抱怨之一是级联功能本身。 CSS的工作方式是将_cascades_(因此命名)父样式作为子样式的样式。这通常是错误的原因,因为类通常具有通用名称,并且易于覆盖非特定类的类样式。 我们使用的例子中
React提供了一种不太新的方法,通过允许我们与JSX一起定义样式,从而完全避免了这个问题。 内联样式向实际组件添加样式不仅允许我们定义组件中的样式,还可以根据应用的不同状态动态定义样式。 React为我们提供了一种使用JavaScript对象而不是单独的CSS文件来定义样式的方法。 让我们再次使用 使用 例如,要在JSX中的元素中添加一个 const style = { color: 'blue' } <div style={style}> This text will have the color blue </div>
在任何情况下,由于这些是JS定义的样式,所以我们不能使用任何传统的css样式名称(因为
要更新我们的头部组件以使用这些样式,而不是依赖于CSS类定义,我们可以在 class Header extends React.Component { // ... render() { // Classes to add to the <input /> element let searchInputClasses = ["searchInput"]; // Update the class array if the state is visible if (this.state.searchVisible) { searchInputClasses.push("active"); } const wrapperStyle = { backgroundColor: 'rgba(251,1)' } const titleStyle = { color: '#222221' } const menuColor = { backgroundColor: '#222221' } return ( <div style={wrapperStyle} className="header"> <div className="menuIcon"> <div className="dashTop" style={menuColor}></div> <div className="dashBottom" style={menuColor}></div> <div className="circle" style={menuColor}></div> </div> <span style={titleStyle} className="title"> {this.props.title} </span> <input type="text" className={searchInputClasses.join(' ')} placeholder="Search ..." /> {/* Adding an onClick handler to call the showSearch button */} <div style={titleStyle} onClick={this.showSearch.bind(this)} className="fa fa-search searchIcon"></div> </div> ) } } 我们的标题将再次变成橙色。 样式库React社区是一个充满活力的地方(这是一个理想的库工作的原因之一)。有很多样式库可以用来帮助我们建立我们的风格,如Radium这样强大的实验室。 大多数这些库都是基于React开发人员通过使用React定义的工作流。 Radium允许我们定义在React组件本身之外的公共样式,它自动提供前缀,支持媒体查询(如 我们不会在这篇文章中介绍Radium,因为它不在本系列的范围之内,但是知道其他的库是很好的,特别是如果你想扩展内联样式的定义。 现在我们知道如何组合我们的组件,我们没有遇到太多的麻烦可以做一些好看的。在下一部分中,我们将马上回到为组件添加用户交互性。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |