Я использую компонент класса и хотел бы использовать стилизованные компоненты в нем. Вот мой код:
файл 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} из"./styled";отображается серым цветом и говорит, что он не читается нигде в файле. Я не знаю, как еще это исправить, так как моя файловая структура правильная. Я предполагаю, что экспортирую / импортирую их неправильно?
edit: Неправильно ли помечены стилизованные компоненты, они должны быть написаны заглавными буквами. sInput => SInput