I recently created a React component and imported an external CSS file. However, I am facing an issue where some of the CSS styles are working correctly while others are not being displayed properly. I'm unsure of what I may be doing wrong. Any guidance or pointers in the right direction would be greatly appreciated.
Here is a snippet of my CSS code:
.Layout{
z-index: 999;
display: flex;
flex-direction: row;
justify-content: space-between;
position: fixed;
background-color: rgba(255,255,255,0.3);
box-shadow: 0px 1px 100px 1px rgba(82, 82, 82, 1);
height: 3em;
width: 100vw;
};
.Logo{
flex: 1;
color: white;
font-size: 20;
padding-left: 15px;
};
.Search{
flex: 5;
};
.Input{
text-align: center;
font-size: 20;
width: 400;
border-radius: 8
}
And here is the structure of my React component:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Locate, autoLocate } from '../Actions'
import '../CSS/Header.css'
class Header extends Component{
constructor(props){
super(props);
this.state={ };
this.onSearchChange = this.onSearchChange.bind(this);
}
componentWillMount(){
this.props.autoWeather('autoip');
}
onSearchChange(event){
this.props.fetchTodayWeather(event.target.value);
}
render(){
return(
<div>
<div className="Layout">
<div className="Logo">Weather Now</div>
<div className="Search"><input className="Input" placeholder='search the weather in your area' value={ this.props.query } onChange={ this.onSearchChange } /></div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
const query = state.locate.query;
return{ query };
}
const mapDispatchToProps = (dispatch) => {
return{
autoWeather:(location) => dispatch(autoLocate(location)),
fetchTodayWeather: (location) => dispatch(Locate(location))
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Header)