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}
Related
I know that must be the way, where it possible to avoid overwriting any component (DOM node) styles with only inline styles (via style attribute), but instead make it much more readable and clean via css attribute. For example:
<StyledInput
css="width: 300px; border: 2px solid red"
value={state.value}
onChange={...}
...
/>
Unfortunately I couldn't find any references for this solution. It may be related to Styled Components.
You may use third-party npm package transform-css-to-js
In the terminal
npm i transform-css-to-js
In your Parent file
<StyledInput
css=`width: 300px; border: 2px solid red`
value={state.value}
onChange={...}
...
/>
Note: Here is used backticks instead of string
In your StyledInput file
import cssToJS from "transform-css-to-js";
import {TextInput} from 'react-native';
//other imports here
const StyledInput = (props)=> {
const transformedCSS = cssToJS(props.css, true);
return (
<TextInput {...transformedCSS} />
)
};
Note: Here I am assuming you want to use css styles in your TextInput and not in a View or some other tags. Please remember TextInput only takes a limited number of styling options as props. RN Official docs have the list of allowed props. In case you want to use it in a View then just spread it like so
<View style={{...transformedCSS}}>
</View>
The prop 'style' is already readable and is standard across all component libraries. Why would you want to go back to css?
To me personally, this is the cleanest way.
<StyledInput
style= {{width: 300; border: `2px solid red`}}
value={state.value}
onChange={...}
...
/>
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%" />
I'm using material-ui version 3.9.3 in my React application. I want to add a background image on a dialog. I'm using the Dialog component for it but I'm unable to add a background image on the whole dialog.
For example:
<Dialog
fullScreen={fullScreen}
open={this.props.open}
onClose={this.handleClose}
aria-labelledby='responsive-dialog-title'
>
<DialogTitle
id='customized-dialog-title'
onClose={this.handleClose}
noCloseButtonNeeded={noCloseButtonNeeded}
>
{/* some jsx */}
</DialogTitle>
<DialogContent>
{children}
</DialogContent>
</Dialog>
I have tried to add an image using classes and custom CSS but I'm unable to do it.
Can anyone help me out to add it? Thanks in advance :)
First, you can define the background image in a styles object that can be used with the withStyles higher-order component to apply it to the dialog:
const styles = {
dialog: {
backgroundImage: "url(https://i.imgur.com/HeGEEbu.jpg)"
}
};
When you pass this object to the withStyles HOC, it will supply your component with a classes prop containing properties with the same names as the properties on styles that you've defined.
Next, you can apply this class to the Dialog by taking advantage of the classes prop (the specific overrides made available for the Dialog component are detailed here):
<Dialog ... classes={{paper: classes.dialog}}>
{/* ... */}
</Dialog>
This is telling material-ui to merge the styles you have defined in styles.dialog with the default styles on the Paper element that is used with the Dialog.
You'll need to make sure that you're wrapping your component in the withStyles HoC. If you have a class component, it will look something like this:
export default withStyles(styles)(DialogWithBackgroundImage);
For functional components, it would look something like:
export default withStyles(styles)(({open, children, classes}) => (<Dialog ...></Dialog>))
Here's a working example that ties everything together: https://codesandbox.io/embed/q3zy4r2np4
Is there any way to override a Material UI components styling without having to create a whole new component using withStyles()?
For instance, say I am rendering the following and I just want to change the color of the "Delete" label:
<div style={styles.rowFooter}>
<FormControlLabel
control={<ClearIcon />}
label="Clear"
title="Clear all fields."
onClick={clearFields}
/>
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
onClick={deleteRow}
/>
</div>
To do this, I'd usually have to:
Create a new styles function that returns { color: "maroon" }.
Create a new component to render the "Delete" button.
Wrap my new component withStyles(newStylesFn)(MyComponent).
But I don't want to do all of that. Is there any way to avoid it?
Update:
One way that I know of is to just pass a CSS className. I was looking for something besides that because it doesn't even work in this situation to override the nested element.
What I'd really like to be able to do is just pass style={{ color: "maroon" }}, but that only changes the color of the icon, not the actual label text...
You could use the classes prop to override styles provided by Material UI instead of className.
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
classes={{
label: 'labelStyle'
}}
/>
styles.css
.labelStyle {
color: maroon !important;
}
Although it's Not the perfect solution, it still does the job without using withStyles().
if I set up a className for certain components like
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use
.Change:hover{
background-color: black; //or any other change on hover
}
nothing is overriden on the hover.
I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?
After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
Working DEMO
Choose any color semantic-ui provide for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button appears like:
You can add inverted props inside Button component that react semantic-ui provide
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
your component appears like:
On hover returns to basic style opposite of inverted
styled components usage with react semantic ui
I recommended you to use styled-components in order to override semantic-ui component style
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Next use your new styled component instead of semantic-ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.
.Change:hover {
background-color: black !importanant;
}
To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.
UPDATE:
Try to remove color='blue' from the template and check if will work with and without !important rule.