如何从文件导出/导入多个样式化的组件？

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代码中，从“ ./styled”导入{sInput，sButton}；变灰，并表示未在文件中的任何位置读取它。由于文件结构正确，因此我不知道该如何解决。我猜我是错误地导出/导入了它们？

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