Question

我是新来的人，我对样式化导入的组件有一个快速的问题。我制作了一个基本的Title组件，它仅输出通过的道具。我的Title.js文件：

import React from 'react';
import '../App.css'

class Title extends React.Component{
    render(){
        return <h1>{this.props.prop}</h1>
    }
}

export default Title

我正在App.js文件中使用它，并尝试通过className对其进行样式设置

import React from 'react';
import Title from './components/Title'
import './App.css';

function App() {
  return (    
      <Title className = 'title' prop = 'Title!'/>    
  );
}

export default App;

我的CSS：

.title{
  background-color: rgba(255, 0, 0, 0.2);
  text-align: center;
  margin-top: 100px;
  padding: 20px;
  border: solid black; 
}

即使我将内联样式应用于“标题”标签，这也不起作用。但是，当我将className应用于Title.js文件中的h1标签时，它确实起作用。是因为在Title标签中编写的所有内容都只是作为道具传递的？如果是这样，那么第三方库组件的样式如何？任何帮助深表感谢！

Answer 1

为了使此方法按您想要的方式工作，您需要将className组件中的Title道具传递到其中的h1：

class Title extends React.Component{
    render(){
        return <h1 className={this.props.className}>{this.props.prop}</h1>
    }
}

反应-通过className将CSS应用于导入的组件

1 个答案: