如何在文件ReactJS中使用CSS

Question

我对反应还很陌生。我正在努力学习一些新东西。所以我想做的是在我的Header.js文件中添加CSS，但我不知道如何做到这一点。因为我不想导入外部或内联CSS。而是像在标题上带有标记的Html中那样使用它。但不仅如此，我还想专门为文件使用CSS，在本例中为Header.js.

Answer 1

这可能有助于

Header.js

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
// alignSelf: 'center',
},
textStyle: {
marginTop: Metrics.ratio(0),
marginHorizontal: Metrics.ratio(70),
fontFamily: Fonts.type.base,
fontSize: Fonts.size.normal,
color: Colors.black,
},
});
class Header extends React.Component { 
render() {
return (
<div style={ styles.color } />
);
}
}

Answer 2

您有几种可能性。

最简单的是在这样的元素中直接使用css代码

<div style={{color:'#000',backgroundColor:'#fff'}}>
...
</div>

或者您可以使用库来实现这一点，如styled-components(https://styled-components.com/)为此。你需要导入这个：

import styled from 'styled-components';

然后您可以在页面顶部定义元素css，即SomeCSSStyling

const SomeCSSStyling = styled.div`
color:#000;
background-color:#fff;
`

然后您可以在react组件的类代码中使用此常量：

class MyReactComponent extends Component {
constructor(props) {
...
}
render() {
return (
<SomeCSSStyling>
...
</SomeCSSStyling>
);
}
}
export default MyReactComponent;

更新：

您还可以使用style-components:定义:hover或::before等

const SomeCSSStyling = styled.div`
color:#000;
background-color:#fff;
&:hover{
font-weight:bold;
}
`

Answer 3

您可以在react组件中创建样式对象，如下所示：

const myDivStyles = {
color: "red",
fontSize: "32px"
}

所有属性都与CSS中的属性相同，但这一个属性带有"-"在camelCase nams中签名更改，例如字体大小更改为fontSize，背景颜色更改为backgroundColor。

然后，您可以通过style属性将此样式添加到组件中的元素中。

render() {
return (
<div style={ myDivStles } />
)
}

您也可以在不创建样式对象的情况下描述样式，如下所示：

<div style={{ color: "red", backgroundColor: "#fff" }} />

请确保您使用的是双闭包｛｛｝｝。

编辑使用：悬停选择器

你有两个进步派。首先，您可以使用组件状态来确定组件是否悬停，然后准备正确的样式，例如：

class Component extends React.Component {
constructor(props) {
super(props)
this.state = {
hovered: false
}
this.toggleHover = this.toggleHover.bind(this)
}
toggleHover(state) {
this.setState({
hovered: state
})
}
render() {
const styles = {
color: this.state.hovered ? "red" : "blue"
}
return (
<div style={styles} onMouseEnter={ () => this.toggleHover( true ) } onMouseLeave={ () => this.toggleHover( false ) }> 
Text 
</div>
);
}
}

其次，你可以使用js风格的组件语法并引用其他组件，你可以在这里阅读更多关于这方面的信息：https://styled-components.com/docs/advanced#referring-其他组件

但老实说，当我处理：悬停或其他选择器时，我更喜欢使用默认的css文件，或者更经常使用为组件准备的scs文件。所以，当我在同一个位置有例如Button组件时，我有Button.css(或Button.scs(文件，在那里我可以使用标准css。在这之后，我有了与应该处理它们的组件连接的css文件。