I’m using Material-ui to build a booking system. In my DatePicker my hintText is white and barely visible and I want to change to color to black. I have used examples for my code from
https://github.com/callemall/material-ui/issues/3753 and https://github.com/callemall/material-ui/issues/5737
I have also tried the example from Material-ui website but that didn’t either work. Im not getting any errors, it’s not just working. Anybody have clue what I can do?
<div className="center-container">
<DatePicker inputStyle={{color: 'black'}} hintText="Date..."
mode="landscape" minDate={new Date()}/>
</div>
There is a property hintStyle, we can use that to set the style of hintText.
Like this:
<DatePicker
autoOk={false}
mode="landscape"
hintText='please'
hintStyle={{color:'red'}}
/>
Check the working fiddle.
Related
I am new to React, I want to create a rating bar like this:
I want to use material UI, but I didn't find a component like this.
I found a rating UI component: https://material-ui.com/components/rating/. but I need the UI to be like a linear gauge and change color with a different number (1/5, 2/5,3/5,4/5,5/5).
Actually, I already used the rating component:
<Grid item xs={6} className={classes.overAllScoreValueContainer}>
<Box component="fieldset" marginLeft={0} marginTop={0.25} padding={0} borderColor="transparent">
<Rating
name="overall-score"
value={this.state.overAllRating}
readOnly
size={"large"}
classes={{
iconFilled: this.props.classes.iconFilled,
iconHover: this.props.classes.iconHover
}}
/>
</Box>
</Grid>
but the UI is not correct.
anyone can help?
Thank you for pointing out using the progress bar in material UI.
I can make the shape like what shown in the picture, but how to change color according to the value??
please check this:
https://codesandbox.io/s/charming-water-cx6dd?file=/demo.js
You can use material ui progress... see the document.
https://material-ui.com/components/progress/#progress
You can also customize it.
Hey thanks for posting your sandbox. I was able to provide the color dynamically with your help. If you're still stuck here then just pass the color as a prop and !important to your style. Thank you soo much.
Here's the updated sandbox link - https://codesandbox.io/s/staging-bird-dh50kl
Im trying to use a DateTimePicker from the library '#react-native-community/datetimepicker' from within Expo - however I can't seem to change the background color from the light grey as pictured. Is it possible to do so on IoS ?
Yes. You can use the style prop, as can be seen in the documentation.
Something like so I would think:
<RNDateTimePicker style={{backgroundColor: "blue"}} />
I'm trying to use antd's badge, but the number+badge always looks out of sync with the icon no matter which icon I use.
Here is a screenshot of the problem:
I have antd's badge imported correctly, NotificationOutlined imported properly, and antd is 4.0+. I have attempted using CSS and playing with fontSize but it does not doing anything.
Code:
<Badge count={5}>
<NotificationOutlined />
</Badge>
I'd appreciate any guesses/ insight to how I can solve this!
Source: https://ant.design/components/badge/
Normal style of drop down view is at bottom after click,HOw can I set to upper place.plz Let me fix that.
Here is my nomal datepicker in reactjs.
<DatePicker
selected={this.state.startDate}
onChange={this.handleDateChange}
/>
Add prop for popperPlacement, like this:
<DatePicker
...
popperPlacement="top-start"
>
React DatePicker does that automatically if there is not enough room for it on the bottom of the page, but this way you can "force" it.
See The source for additional placement options.
I'm working on some Salesforce lightning components and I need a nice DateTime control. The component reference lists the ui:inputDateTime control and this control supports the functionality, but it sure doesn't look like the control in Salesforce!
Here's what you get in SF experience:
And here's what you get out of the box with the ui:inputDateTime control:
The calendar itself is way too large and just isn't styled, and the Time control isn't even displaying the right icon. Here's my markup:
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputDateTime aura:id="encStart"
label="Start Time"
value="{!v.newEvent.startTime}"
displayDatePicker="true" />
</div>
</div>
Am I just missing or mis-applying a SLDS tag here? Any advice would be appreciated. Thanks.