Is it possible to change the default width of input field of DayPickerInput? If yes, then how can I achieve it? I am not sure if we can do this with overlayComponent.
You can use inputProps to add your props such as style to the input field. See docs: http://react-day-picker.js.org/api/DayPickerInput#inputProps
For example:
<DayPickerInput inputProps={{ style: { width: 200 } }} />
You can do it by writing your own styles, but first check the stylesheets of day picker here - react-day-picker/lib/style.css and then modify accordingly.
Related
This primary-main should be converted to color something like #abcdefg but it is just pasting primary-main as it is
I'm using angular MUI + React
Like Jacob's comment, you would need to reference the theme within your fill key, like so:
<menu.icon
sx={{
fill: theme => selected ? theme.palette.primary.main : theme.grey.A400,
color: selected? 'primary.main' : 'grey.A400',
}}
/>
Not all properties are theme aware. In that case you need to bring in the theme object. Don't use the useTheme hook as Jacob mentioned in his comment. Instead just use a function, which will import the theme object.
Attempting to style a react-number-format component by adding a className does not work. How do I style this component?
<NumberFormat
thousandSeparator={true}
prefix={'$'}
decimalScale={2}
fixedDecimalScale={true}
id={props.id}
name={props.id}
value={props.value}
autoFocus={props.autofocus}
onChange={props.changehandler}
className="newclass"
/>
CSS
.currency{ background-color: green}
In this particular case, I did not have the react engine running, so refreshing the page resulted in no changes. Early Morning rookie mistake.
From there documentation page, use the 'custom input' prop to pass your own component, which you can style just the way you like it:
You can easily extend your custom input with number format. But custom input should have all input props.
import TextField from 'material-ui/TextField';
<NumberFormat customInput={TextField} format="#### #### #### ####"/>
try this
<NumberFormat
thousandSeparator={true}
prefix={'$'}
decimalScale={2}
fixedDecimalScale={true}
id={props.id}
name={props.id}
value={props.value}
autoFocus={props.autofocus}
onChange={props.changehandler}
className="currency
"
/>
CSS
.currency{ background-color: green}
Is there a props in material-table to change the row color while hovering?
Something like this example.
Thank you
According to the styling section in the documentation, you can pass a rowStyle props, like this :
options={{
rowStyle: {
backgroundColor: '#EEE',
}
}}
You can also use the onHover's React hook on your table component and apply your hover's style there.
I have website with user can choice date_range, so i use datepicker element-ui. But datepicker default theme, how i can change that in vue.
At present, Element-UI doesn't provide the function of highly customized theme, only simple customized size and color.
However, you can customize the style with the following configuration:
popper-class - custom class name for DatePicker's dropdown
picker-options - You can set custom class name by creating a picker-options object with cellClassName property.
You can override the default style with a custom class.
Example:
// template
<el-date-picker v-model="value1"
type="date"
popper-class="custom-date-picker"
placeholder="Pick a day">
</el-date-picker>
// css
.custom-date-picker{
.el-date-picker__header{
// custom header style here
}
}
this working for me, Element Plus with Vue 3!
In App.vue
<style lang="scss">
.el-date-editor {
--el-date-editor-width: 40% !important;
}
</style>
You need to just add style inside the tag like
<el-date-picker v-model="value1"
type="date"
popper-class="custom-date-picker"
placeholder="Pick a day"
--> style="width: 100%" />
The docs are clear on using error styles for form inputs such as text fields. But how do I use the same style on a custom element such as a text label for a file upload button, or any other custom component that might not fit the a pre-defined component?
Edit for clarity: I don't want to just choose a color I like and plop it in my css with an appropriate selector. I want to make sure I'm using the same error color as the theme, whether that's the default, some imported theme, or custom (if custom it's pretty easy, but not DRY, to just use the same value in css).
Specifically, in this use case, I want to limit users to uploading files less than 100MB, and display an error message if they have selected a file larger than this limit. I'd like to display the text in the error style of the configured theme, but from the material-ui docs I can only see how to set error properties of pre-packaged components such as text fields.
So here I have, simplified:
<input
accept="video/*"
id="file-upload-button"
type="file"
onChange={(e) => {this.fileChanged(e);}}
/>
<label htmlFor="file-upload-button">
<Button variant="contained" component="span" color="default">
Browse video
</Button>
<br /><small>(Max size: 100MB)</small>
</label>
where the input tag has display: none applied via a css file. Also,
fileChanged(e) {
let file = e.target.files[0];
let sizeMB = file.size / 2**20;
this.setState({
selectedFile: e.target.files[0],
fileTooLarge: sizeMB > 100
});
}
How do I get the theme's error color to apply it to the "Max Size" message or other element?
3 steps to solve your issue:
You have to inject the theme into your app with the theme provider (apply to v3 MUI, but should be similar with v4 now). See doc.
You can then customize the theme, like such:
const theme = createMuiTheme({
palette: {
error: {
main: "#ff604f"
}
}
}
Finally you can use your custom color by injecting styles into your component with withStyles() (or useStyles() in v4 hook for instance) and create your styles const in your component, example:
const styles = theme => ({
button: {
backgroundColor: theme.palette.error.main,
}
}
Note: using error as a palette variable name will override the
default error color value.
Possible duplicate of:How to add a class with React.js?
You could give an ID and then: getElementById.classList.add("errorClass");
Then if the user uploads the proper size: getElementById.classList.remove("errorClass");