So I'm trying to style the input field of a react-select component. Unfortunately, the font-family is being overwritten by the standard input element since the styles are being applied to the wrapper div and not the input field itself.
input: () => ({
fontFamily: `${theme.fonts.tabs.family} !important`,
fontWeight: theme.fonts.tabs.weight,
fontSize: 18,
color: theme.colors.secondary,
height: 24
}),
How would I go about changing the fontFamily without using class names?
What this code produces
What I want
React-Select renders the html input element inside the div that gets the class property that you assign when you use this input component styles.
So to extend your attempt, just add a child selector on your styles object, targeting that input.
input: () => ({
fontFamily: `${theme.fonts.tabs.family}`,
'& input': {
font: 'inherit',
},
}),
That way the rendered input inherits the font style from the div that receives the generated *-Input class.
You can use the following style-in-JS props:
control: base => ({
...base,
fontFamily: 'Times New Roman',
})
No need to use !important declaration.
EDIT
It seems to have an issue for the input and it does not render proper fontSize so have a complete experience you can add a className on your select like this:
<Select className="select" styles={styles} options={options} />
and apply the following CSS:
.select input {
font-family: "Times New Roman";
}
Here a live example.
Related
I would like to change the font of this "Label" which I have marked in red. I went through the react documentation but could not find any solution on styling.
I tried this but its not working...
multiValueLabel: (provided, state) => ({
...provided,
fontSize: "18px",
}),
Here is codesandbox. I am trying to have the ability to sort by the first name and last name The default Datagrid only shows the sort icon when hovering. Is there a way I can set it to be always visible? Thanks for the help!
you can use .MuiDataGrid-iconButtonContainer. however Material-UI doesn't provided default icon for unsorted list. I have forked your demo and updated it. added icon for unsorted list too. please check codesandbox
This is what I did:
const StyledDataGrid = styled(DataGrid)(() => ({
'& .MuiDataGrid-iconButtonContainer': {
marginLeft: '2px',
visibility: 'visible !important',
width: 'auto !important',
},
}))
I created a styled component which adds some custom styling to DataGrid. Specifically to always show the icon and take up width for it. Using !important is not recommended, but doesn't harm in this case.
I must add, this only works with using custom sort icons, like so:
<StyledDataGrid
components={{
ColumnSortedAscendingIcon,
ColumnSortedDescendingIcon,
ColumnUnsortedIcon,
}}
/>
If you don't want to use custom icons, I'm sure it's doable, you just need to play with CSS bit more.
Add the below code in .scss file. (.MuiDataGrid-sortIcon is pre-defined class of Mui Datagrid). Hope it helps!
.MuiDataGrid-sortIcon {
opacity: inherit !important;
}
You can use the sx prop in DataGrid like so:
<DataGrid
sx={{
'.MuiDataGrid-iconButtonContainer': {
visibility: 'visible',
},
'.MuiDataGrid-sortIcon': {
opacity: 'inherit !important',
},
}}
In my case, I had to style both the iconButtonContainer and sortIcon make sure it's always visible.
I have the following typeform embedded in a react project:
import { PopupButton } from '#typeform/embed-react'
const MyComponent = () => {
return (
<PopupButton id="<form-id>" style={{ fontSize: 20; fontFamily: "Helvetica" }} className="my-button">
click to open form in popup
</PopupButton>
)
}
However, while the change of font is working for my divs, it's not working with the PopupButton component. How can I change the font "click to open form in popup" contained within?
PopupButton component will let you change the button CSS via style prop.
In your case you have a typo in the object in style prop, it contains semicolon (;) instead of a colon (,) after fontSize. When you use colon (,) it works:
<PopupButton id="<form-id>" style={{ fontSize: 20, fontFamily: "Helvetica" }} className="my-button">
click to open form in popup
</PopupButton>
I did a quick test here and it works as expected:
https://codesandbox.io/s/charming-shaw-92ber?file=/src/App.js
I would like to change the color of the border of the input on focus, but not sure how to achieve it. I can change the styles the component but not when focusing. I´m using material-ui css option.
Here is the code so far:
....
<PhoneInput
country={'pt'}
localization={pt}
specialLabel={field.label}
value={phoneValue}
onChange={phone => setPhoneValue(phone)}
inputStyle={{
'&:focus': {
borderColor: 'red'
}
}}
/>
Sample:
Thanks!
You can change border color by placing a class to containerClass of PhoneInput component. That is, if you you use Material UI you can define a class as following
borderClass: {
"&.react-tel-input .form-control:focus": {
borderColor: "#69e781",
boxShadow: "0px 0px 0px 1px #69e781",
}
}
then use this class as follows
<PhoneInput
containerClass={classes.borderClass}
.
.
/>
or if you use a CSS file you can override the rule below in your CSS file
.react-tel-input .form-control:focus:
The styles on focusing the input of React-Phone-Input exists on .PhoneInputInput class on focus-visible property. In order to override this styling, access the PhoneInputInput Class.
Below example is for the devs using Material UI styled components.
".PhoneInputInput": {
"&:focus-visible": {
outline: "none",
},
}
how to change hover for all elements in react-select?
<Select
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
Source host: https://codesandbox.io/s/react-codesandboxer-example-8iq7b
To customise your select, you can use the props styles. All the different components you can change are listed here.
To target specifically the hover state you should use the follow pattern:
const styles = {
control: base => ({
...base,
"&:hover": {
borderColor: "red"
}
})
};
Other options are available such as the state inside each components depending of what you're trying to achieve.
If you want all the elements to behave depending of the state of the control component you will have to write something like this:
const styles = {
control: base => ({
...base,
"&:hover": {
borderColor: "red",
color: "red"
}
}),
dropdownIndicator: base => ({
...base,
color: "inherit"
}),
singleValue: base => ({
...base,
color: "inherit"
})
};
You would probably also kill the animation ease depending of the speed of the effect. You can see a live example here.