如何在文件中使用 CSS - ReactJS答案

【问题标题】：How to use CSS withinin the file - ReactJS如何在文件中使用 CSS - ReactJS
【发布时间】：2021-03-15 10:00:24
【问题描述】：

我对反应很陌生。我正在尝试学习一些新东西。所以我想做的是在我的 Header.js 文件中添加 CSS，我不知道该怎么做。因为我不想导入外部或内联 CSS。而是像在 Html 中一样在标题上使用标签。但不仅如此，我还想专门为文件使用该 CSS，在本例中为 Header.js。

【问题讨论】：

标签： javascript css reactjs react-native

【解决方案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 } />
    );
  }
}

【讨论】：

我想在页面内执行此操作，没有外部文件。

【解决方案2】：

你有几种可能。

最简单的就是直接在元素like中使用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;
   }
`

【讨论】：

添加 :hover 等状态怎么样？
是的，这是可能的。请在我的回答中查看我的更新...

【解决方案3】：

你可以像这样在 react 组件中创建样式对象：

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

所有属性都与 CSS 中的相同，但带有“-”符号的属性更改为驼峰命名法，例如font-size 更改为 fontSize， background-color 更改为 backgroundColor。

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

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

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

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

确保您使用的是双闭包{{ }}。

编辑使用 :hover 选择器

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

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-to-other-components

但老实说，当我处理 :hover 或其他选择器时，我更喜欢使用默认的 css 文件或更经常为组件准备的 scss 文件。因此，当我在同一位置有例如 Button 组件时，我有 Button.css （或 Button.scss ）文件，我可以在其中使用标准 css。在此之后，我将 css 文件与应该处理它们的组件连接起来。

【讨论】：

如何使用:hover thoo?
检查添加的“编辑”部分:)