Question

class App extends Component {

    constructor() {
        super()
        this.state = {   //state is what decribes our app
            robot: robot,
            searchfield: ''
        }
    } 

    onSearchChange = (event) =>  {
        this.setState({ searchfield: event.target.value })       
        console.log(this.state.robot);
    }  

    render() {
        const filteredRobots = this.state.robot.filter( robot => {
            return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase()); 
            })
        return(
        <div className='tc'>
            <h1>ROBOFRIENDS</h1>
            <SearchBox searchChange={ this.onSearchChange } />
            <CardList robot = { filteredRobots }/>  
        </div>
        );
    }
}

我正在尝试扩大ROBOFRIENDS的字体大小，我试图创建另一个用于编辑h1的css文件，并且还尝试了

<h1 className="style:{fontSize=3em}">ROBOFRIENDS</h1>

但是它们都不起作用。但是，当我尝试使用相同的方法来更改字体颜色和背景颜色时，它们会起作用！寻找某人可以帮助我解决这个问题。

Answer 1

您无法使用className属性添加样式。您有两种选择：

在元素中添加className并在CSS中设置该className的样式。
或添加style属性，例如：style={{ fontSize: '3em' }}

Answer 2

我喜欢第二个：

style={{ fontSize: '3em' }}

因为这样，您可以将变量传递给它。

但是我最喜欢的方法是使用样式化组件。 https://styled-components.com/

检查一下，这是一种非常干净的方法，可以在react.js中进行样式设置并重复使用样式。

Answer 3

有多种方法。我建议安装“样式化组件”。我在下面提供了一个有关如何使用它的示例：-

import styled from 'styled-components';

export const StyledHeading = styled.h1`
    font-size: 3em;
`;


class App extends Component {

    constructor() {
        super()
        this.state = {
            robot: robot,
            searchfield: ''
        }
    } 

    onSearchChange = (event) =>  {
        this.setState({ searchfield: event.target.value })       
        console.log(this.state.robot);
    }  

    render() {
        const filteredRobots = this.state.robot.filter( robot => {
            return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase()); 
            })
        return(
        <div className='tc'>
            <StyledHeading>ROBOFRIENDS</StyledHeading>
            <SearchBox searchChange={ this.onSearchChange } />
            <CardList robot = { filteredRobots }/>  
        </div>
        );
    }
}

无法在react组件中更改<h1>的字体大小

3 个答案: