I want to use Ant design's autocomplete functionality, however I dont want to be limited to their input field look. So I want to style it however I want. Can i do that?
My custom input field
const FormInput = styled.input`
background-color: ${(props) =>
props.top ? "rgba(122,161,240, 0.3)" : "#EDEDED"};
font-size: 14pt;
font-family: var(--san-serif-2);
font-weight: 300;
padding: ${(props) =>
props.percent ? "10px 10px 10px 50px" : "10px 20px 10px 40px"};
border-radius: 10px;
outline: none;
border: none;
transition: 0.2s ease-in-out;
width: 100%;
&:hover {
background-color: ${(props) =>
props.top ? "rgba(122,161,240, 0.4)" : "#E4E4E4"};
}
&::placeholder {
color: rgba(122, 161, 240, 1);
}
`;
The Autocomplete i want to style
<AutoComplete
allowClear
value={symbol}
options={options}
style={{
width: 200,
}}
onSelect={onSelect)
onSearch={onSearch}
onChange={onChange}
placeholder="control mode"
/>
It seems like the actual input field is surrounded by a div and thats why stuff like width works. However when i do padding and other stuff, the div is the one affected and not the input field inside it.
You can do it by adding your styled input as a child of AutoComplete :
<AutoComplete
allowClear
value={symbol}
options={options}
onSelect={onSelect)
onSearch={onSearch}
onChange={onChange}
placeholder="control mode">
<FormInput />
</AutoComplete>
Related
I need to take some button styling and apply it to some inline styling.
I thought this would be a simple copy and paste but when I try that I have a whole host of errors.
I've tried to convert the styles to inline format but I keep chasing errors I don't know how to resolve.
Thanks for the help.
The following is the button I am trying to apply styling to.
<BtnWrap>
{navToPage && navToPage.startsWith("/") ? (
//if it is linked to another page use router link
<LinkR to={navToPage} style={{}}>
{navToPage}
</LinkR>
) : (
//else use the smart link component
<Button
to={navToPage}
smooth={true}
duration={500}
spy={true}
exact="true"
offset={-80}
primary={primary ? 1 : 0}
dark={dark ? 1 : 0}
dark2={dark2 ? 1 : 0}
>
{buttonLabel}
</Button>
)}
</BtnWrap>
This is the button styling I am trying to convert to inline styling.
export const Button = styled(Link)`
border-radius: 50px;
background: ${({ primary }) => (primary ? "#ca1f27" : "#010606")};
white-space: nowrap;
padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
color: ${({ dark }) => (dark ? "#010606" : "#fff")};
font-size: ${({ fontBig }) => (fontBig ? "20px" : "16px")};
outline: none;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
&:hover {
transition: all 0.2s ease-in-out;
background: ${({ primary }) => (primary ? "#fff" : "#ca1f27")};
}
`;
Styles in React.js are a kind of object that is passed inside the style property like this
style={{ marginTop: 10, backgroundColor: 'red' }}
I leave some references that can help you:
https://www.w3schools.com/react/react_css.asp
https://www.pluralsight.com/guides/inline-styling-with-react
I am working with the react-places-autocomplete package.
Whenever I type text into the input field and get suggestions, it makes the whole input field jumps up, ruining the look.
How can I get the input field to stay in place and just have the suggestions drop down normally? I've tried adding a position: relative and top: Npx style to the suggestions, but that doesn't stop the input field from jumping up.
Searchbar.js
return (
<div className="search">
<PlacesAutocomplete
value={locationChars}
onSelect={handleSelect}
searchOptions={{ types: ["(cities)"] }}
onChange={handleChange}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<input
ref={inputRef}
{...getInputProps({ placeholder: "Search Location" })}
className="search-input"
/>
<div className="suggestions-container">
{loading ? <div>Loading...</div> : null}
{suggestions.map((suggestion) => {
const style = {
backgroundColor: suggestion.active ? "#41b6e6" : "white",
};
return (
<div {...getSuggestionItemProps(suggestion, { style })}>
{suggestion.description}
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
<SearchIcon className="search-icon" />
</div>
Searchbar.css
.search {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
background-color: purple;
margin-right: 1rem;
color: black;
opacity: 1 !important;
}
.search-input {
height: 12px;
padding: 10px;
border: none;
width: 100%;
}
.search-icon {
padding: 5px;
height: 22px !important;
background-color: blue;
}
.suggestions-container
}
Just a guess but you might want to do something with the suggestions-container class. I recently found react-google-autocomplete to be a very smooth experience btw. Happy Hacking!
I'm hitting an API to get these data. I mapped the data to my select menu. I'm not able to change the height of the dropdown box . any idea on how it can be achieved?
react.js
inside render
<div className={styles.nationality}>
<label htmlFor="nationality">Nationality<span className={styles.star}>*</span></label><br/>
{/* <img className={styles.nationalitydrop} src={drop} alt='drop' /> */}
{['nationality'].map(key => (
<select
key={key}
className={styles.nationalitybox}
type="text"
placeholder="select"
menuPlacement="bottom"
onChange={(event) => this.handleUserInput(event)}
value={this.state.nationality}
name='nationality'
> {this.props.nationalityData.map(({[key]:id}) => <option className={styles.data}key={id}>{id}</option>)}
</select>
))}
</div>
stylesheet
.nationalitybox
{
width: 408px;
height: 56px;
background: #30333F 0% 0% no-repeat padding-box;
border-radius: 3px;
opacity: 1;
color: #B4B6C4;
font-size: 20px;
border-style:none none solid;
outline: none;
}
.nationalitybox:placeholder-shown{
font-size: 14px;
color: #B4B6C4;
}
.data{
background-color: #B4B6C4;
color: black;
width: 220px;
}
[![dropdown][1]][1]
I think you are using wrong to style your select menu, you cannot use 'style.nationalitybox' because that not a class.
I suggest you use these options.
1st Option:
Change className={styles.nationalitybox} To className = "nationalitybox".
2nd Option:
If you are using Material UI then you have to use useStyles above the component.
For example:
const useStyles = makeStyles((theme) => ({
nationalitybox: {
height: "56px"
}
}));
const ComponentName = () => {
const styles= useStyles();
}
I've defined a file with a styled textarea but I want to use a different piece of style for a React component, at the end I am not able to change the style for the particular tag.
Here below the textarea file
const Container = styled.div`
margin-bottom: 2rem;
`;
const Label = styled(B1)`
margin-bottom: 0.5rem;
`;
const StyledTextArea = styled.textarea`
width: fill-available;
height: 2rem;
padding: 0.25rem;
background-color: black;
font-size: 1rem;
font-weight: 400;
border: none;
border-radius: 0.25rem;
::placeholder {
color: red;
}
`;
const TextArea = ({ label, placeholder, input, rows }) => (
<Container>
{label && <Label>{label}</Label>}
<StyledTextArea rows={rows} {...input} placeholder={placeholder} />
</Container>
);
TextArea.propTypes = {
label: PropTypes.string,
placeholder: PropTypes.string,
input: PropTypes.object.isRequired
};
export default TextArea;
Here below there is my component in which I'd like to change the font-size component but it does not work
const TextBox = styled(TextArea)`
> StyledTextArea {
font-size: 3rem !important;
}
`
class SingleGuestForm extends Component {
<Field
name="Nested Rules"
label="Test with nested rules"
rows="3"
component={TextBox}
/>
}
It seems that the rule defined in the TextBox is ignored by the style engine. Do you know why it happens? I tried different solution (surrounding StyledTextArea with curly braces, etc) but nothing happen even if in the official doc the solution I've implemented should work (here). Thank you so much for any help
I have a div component:
const Parent = styled.div`
&:not(${Input}:focus):hover {
border-color: blue;
}
`;
and child which is input
const Input = styled.input``;
As you can see, I dont want to change border-color on Parent, if Input is focused. However atm the :hover doesnt work at all. Looking for help, thanks!
You can leverage :focus-within to do that.
div {
padding: 1em;
margin: 2em;
display: inline-block;
border-width: 3px;
border-style: solid;
}
div:hover {
border-color: red;
}
div,
div:focus-within,
div:focus-within:hover {
border: 3px solid blue;
}
<div>
<input type="text">
</div>
I don't know how you can handle it with only selector css, but you can trick it with javascript.
Your styled-component :
const Input = styled.input``
const Parent = styled.div`
border: 1px solid blue;
:hover {
border-color: ${p => p.inputFocus ? "blue" : "yellow"};
}
`
and in your render you can handle a state focus of you input.
render :
state = {
inputFocus: false
}
setFocus = () => this.setState({inputFocus: true})
unsetFocus = () => this.setState({inputFocus: false})
render() {
const { inputFocus } = this.state
return (
<Container inputFocus={inputFocus}>
<Input
onBlur={this.unsetFocus}
onFocus={this.setFocus}
/>
</Container>
)
}