I have a material UI RaisedButton and I want to change the background color.
I have this:
const style = {
backgroundColor: 'green'
};
export default class CreateLinksave extends React.Component {
<RaisedButton
label="Continue"
style={style}/>
}
but when I refresh the page the material-ui style remains, so how can I override the style?
A second question is, how to avoid doing inline styling? I was thinking on create a js file with constants with the styles I need for my components, import it and access to my styles that way, is that a good approach?
I'm new to React so some help would be nice...
Regards.
You can override the style by passing in the attribute. See the docs for which attributes are supported.
creating a JS file (or multiple files) with your styling sound like a good idea, as long as the rules are simple. if you find yourself merging & overriding styles it would be easier just keeping the style in the component file.
You'll end up with something like
import {green} from './my-style/colors';
...
<RaisedButton label="change min" backgroundColor={green} />
If you are using Material UI you should use jss as seen in their documentation. And use the withStyles HOC. Actual link https://material-ui.com/customization/css-in-js/
Here is an example:
import { withStyles } from '#material-ui/core/styles';
const style = {
back: {
background: green,
},
};
class CreateLinksave extends React.Component {
{classes} = this.props;
<RaisedButton
label="Continue"
style={classes.back}/>
}
export default withStyles(styles)(CreateLinksave );
I think you should check the documentation to have better and reusable components.
Related
I'm making a simple portfolio page and for the same, I have a few icons I want to render for which I have used Material UI icons
Now I added the same custom styling to them and since I'm new to styled-components I did it as follows
const iconsArray = [GitHubIcon, LinkedInIcon, CallIcon];
const styledIcons = iconsArray.map(
(item) => styled(item)`
//other styles
:hover {
cursor: pointer;
}
`
);
the iconsArray above is made from direct imports from Material UI icons
Now I want to render the icons as
{styledIcons.map(styledIcon=>(
<styledIcon>
<a href={correspondingLink}>
</a>
</styledIcon>
)}
This won't work for obvious reasons but I can't access the component even using styledIcon.component like we could for normal react components. Any suggestions on how to achieve this?
i am wondering is there a way to dynamically import a css file into react.
say i have a css file named style-light.css and i have another named style-dark.css.
is there a way to use react state or some other method to dynamically import the css files into the component based on the current value of the state ?
eg
import "../style-light.css" // default import
export default function TestImport(){
const [switch, setSwitch] = useState("light");
if(switch === "dark"){
import "../style-dark.css" // adds the style-dark import below the light one to overwrite the light css.
}
return (
<div>
<button onClick={()=> setSwitch("dark")}> click to get dark css </button>
</div>
)
}
bascially something like that?
any insight will be helpful. thanks
Option 1
For that I would recommend that you use CSS variables and only one CSS file. You can change the values of your variables based on a class applied on your page body. For example:
variables.css
:root {
--textColor: black;
}
[class="dark-theme"] {
--textColor: white;
}
With javascript you can add or remove the class from your html document, like this
component.js
document.documentElement.classList.add('dark-theme')
document.documentElement.classList.remove('dark-theme')
On your components styles you can use the variables with var(--variable)
component.css
.my-component-class {
color: var(--textColor);
}
Option 2
Use some CSS-IN-JS library like styled-components or emotion, you can use a ThemeProvider to change our theme accordingly with some state in your application. See this example here: https://styled-components.com/docs/advanced#theming
I'm using Material UI components and MaterialTable and I want to stylish the components using StyledComponents
But I not been having the desired results when I try to apply styles using StyledComponents
CodeSandBox Online Example
Example:
import styled from 'styled-components'
import MaterialTable from "material-table";
export const MaterialTableStyled = styled(MaterialTable)`
/* STYLE FOR FILTER ROW */
tbody > .MuiTableRow-root:first-child {
background-color: #F1F3F4 !important;
}
`
When I use the MaterialTableStyled component no applied the style.
Instead, if I use a div on my StyledComponent:
import styled from 'styled-components'
export const MaterialTableStyled = styled.div`
/* STYLE FOR FILTER ROW */
tbody > .MuiTableRow-root:first-child {
background-color: #F1F3F4 !important;
}
`
My custom styles work perfecty on that way:
<MaterialTableStyled> // DIV WITH STYLES
<MaterialTable
// ALL PROPS AND STUFFS
/>
</MaterialTableStyled>
...the question is: it's possible "override" or change styles without using the div to change the style?
A component has to pass the className property into their children in order styled function to work.
From a quick look, MaterialTable doesn't do that, as a result styled components can't assign another css class to the table.
Component compatible with styled function
const StyledFriendlyComp = ({className}) => <div className={className}>Styles being applied</div>
Component that won't work with styled function
const StyledFriendlyComp = () => <div>Styles not working</div>
In this cases you need to wrap the component with another element like div.
If you want to style a component directly, you will need to specify a HTML element.
In your case though (if you are only using it to style lower-level components) you could use something like React Context to pass down a prop that the styled-component can consume and utilize to determine the style.
If you explicitly need the prop/value for styled-component usage, you could also use set it as a styled-component transient prop.
I am using react and styled components and use 3rd party component named IntlTelInput.
My code goes like this:
const StyledIntlTelInput = styled(IntlTelInput)`
background: blue;
`;
export default function PhoneNumberInput() {
return (
<StyledIntlTelInput />
);
}
IntlTelInput doesn't support className property, but containerClassName. As a result I get the IntlTelInput without blue background.
How can I solve this?
I have a two components and they use same layout/styling with different content. I use Radium in React.js.
I have used in-line styling in one of the component and want to use same styling to other component.
I'm new to both Radium and React. Help me out!
Thanks in advance.
Cheers!!
You just need to create a shared external styles file and then import it in every component that needs it.
// styles.js
export default {
base: {
background: 'red'
}
}
// components
import sharedStyles from 'path/to/styles.js';
#Radium
class Button extends React.Component {
render() {
return (
<button
style={[
sharedStyles.base
]}>
{this.props.children}
</button>
);
}
}