reactjs - 如何从文件中导出/导入多个样式组件？

Question

我正在使用一个类组件，并希望在其中使用样式化组件。这是我的代码：

styled.js 文件：

import React from 'react';
import styled from "styled-components";

export const sInput = styled.input`
margin:1% 0;
padding: 1%;
border: 1px solid black;
background: #323232;
color: ivory;
`;

export const sButton = styled.button`
background: coral;
margin: 0 .5%;
padding: 1%;
border: none;
`;

Search.js 文件：

import React from 'react';
import {sInput, sButton} from "./styled";

class Search extends React.Component{
    constructor(){
        super();
        this.state = {
            search: ""
        }
    }

    handleChange = e =>{
        this.setState({
            search: e.target.value
        })
        console.log(this.state.search)
    }

    handleSubmit = e =>{
       e.preventDefault();
        console.log("search",this.state.search)
        this.props.search(this.state.search)
        this.setState({
            search:""
        })
    }

    render(){
        return(
            <div className="search">
                <form>
                    <label htmlFor="search"></label>
                    <sInput 
                    type="text" 
                    name="search" 
                    value = {this.state.search}
                    placeholder="search your list.." 
                    onChange = {this.handleChange}/>
                    <sButton  type="submit" onClick ={this.handleSubmit}>Search</sButton>
                    <sButton  type="submit" onClick = {this.props.clearSearch} >Clear Search</sButton>
                </form>
            </div>
        );
    }
}

export default Search;

在 VS 代码中导入 {sInput, sButton} from "./styled"; 显示为灰色，并表示文件中的任何位置都没有读取它。我不知道如何解决这个问题，因为我的文件结构是正确的。我猜我错误地导出/导入它们？

编辑：没有正确标记样式组件，它们需要大写。sInput=>SInput

标签： reactjsstyled-components