Currently, I am working on styling a React component in a way that allows for either horizontal or vertical styling without using flexbox.
My question is, how can I pass styles down to the component in a way that applies individual styles to the child elements of the component?
For example, to achieve https://i.sstatic.net/rp6nh.png
and
https://i.sstatic.net/PHEu7.png
The styles specific to the horizontal layout are:
input, button {
vertical-align:middle;
}
button {
margin-left: 10px;
}
while those specific to the vertical layout are:
.form-control {
display: inline-block;
}
.btn {
display: block;
margin: auto;
}
Here is an example of the component:
class Form extends React.Component {
render () {
return (
<form className="form-group">
<input className="form-control" type="text" placeholder="St. George, Utah"/>
<button className="btn">Get Weather</button>
</form>
);
}
}