I have this existing UI components has built with styled-component.(https://styled-components.com/)
Now I want to overrides existing styles by using Styled System (https://styled-system.com/) so I can style with style props,
Here is what I did so far :
Created a Box component as below
import styled from 'styled-components';
import { space, color, layout, flexbox, background } from 'styled-system';
import shouldForwardProp from '#styled-system/should-forward-prop';
const Box = styled('div', { shouldForwardProp })(
{
boxSizing: 'border-box',
minWidth: 0,
},
space,
color,
layout,
flexbox,
background
);
Replace div element with new Created Box component
AlertBox (Existing UI component) :
import styled from 'styled-components';
import Box from './component/Box'; // my new changes
const AlertBox = styled(Box)( // replace div with Box
color: '#fff'
);
<AlertBox color="#006699"/>
My problem is the color of component is still #fff. Not #006699
How can I make my component get override using newly created Box component ?
Please help me here
Related
I'm experimenting with the windowing technique in Next.js with Antd, and I made this simple app that has this index.tsx page:
import { CSSProperties } from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List } from 'react-window'
import { Card, Tooltip } from 'antd'
import data from '../data'
import styles from '../styles/Home.module.css'
const people = data();
const Row = ({ index, style }: { index: number, style?: CSSProperties }) => (
<div style={style}>
<Card bordered={true}>
<p>{people[index].name}</p>
<Tooltip title={`${Math.floor(people[index].age/15)} in dog years`}>
<p>{people[index].age}</p>
</Tooltip>
</Card>
</div>
)
const Home: NextPage = () => {
return (
<AutoSizer>
{({ height, width }) => (
<List
height={height}
itemCount={people.length}
itemSize={100}
width={width}
>
{Row}
</List>
)}
</AutoSizer>
)
}
export default Home
The FixedSizeList won't work until I add the following style in globals.css:
html, body, div {
height: 100%;
}
However, when I do that, it breaks the Tooltip by Antd. Usually what happens is that when I hover above a relevant element, the tooltip appears for a split second with 100% height and then disappears and it doesn't appear anymore on a page no matter where I hover.
How can I solve this?
I finally found a solution after much agony.
Apparently, Nextjs wraps the entire layout with a div with id __next. That's the outer-most container of the entire page, and its height is not set, so since the content of FixedSizeList is positioned such that it's outside of the regular page flow, the __next div gets a height of 0.
I don't know if there is any better solution, but I simply added this little style in the globals.css file:
div#__next {
height: 100%;
}
That fixed the issue without forcing every other div in the page to have height at 100% (which includes the tooltips and popovers).
Is it possible to style material-ui tooltips using the styled function from #emotion/styled?
import { Tooltip } from '#material-ui/core';
import styled from '#emotion/styled';
const MyTooltip = styled(Tooltip)`
// style the tooltip label
`
I tried using the global Mui classes etc. but did not succeed.
I know that an option is to use createMuiTheme and use <ThemeProvider> to apply it, but then the default theme is also applied to the children of the Tooltip component.
The difficulty with styling Tooltip in this manner is that Tooltip doesn't support a className prop (which is what the styled function injects) -- the className prop would simply be forwarded on to the element wrapped by the tooltip.
The solution is to intercept the props passed by styled and leverage the classes prop of Tooltip as shown below:
import React from "react";
import { StylesProvider } from "#material-ui/core/styles";
import Tooltip from "#material-ui/core/Tooltip";
import styled from "#emotion/styled";
const StyledTooltip = styled(({ className, ...other }) => (
<Tooltip classes={{ tooltip: className }} {...other} />
))`
font-size: 2em;
color: blue;
background-color: yellow;
`;
export default function App() {
return (
<StylesProvider injectFirst>
<StyledTooltip title="Test tooltip">
<span>Hover over me</span>
</StyledTooltip>
</StylesProvider>
);
}
Related GitHub issue: https://github.com/mui-org/material-ui/issues/11467
I am using Radium library for inline styling in react . Using it works fine for other components but i am having issues with Material-UI components. When i hover my mouse over the Paper , it doesn't change the color to green . What's wrong here ? How do I fix this ?
import React, { Component, Fragment } from 'react';
import { Grid, GridList, Paper, ListItem, List, ListItemIcon, ListItemText } from '#material-ui/core';
import { connect } from 'react-redux';
import Radium from 'radium';
class AchievementsHome extends Component {
render() {
return <>
<Grid container alignItems="center" direction="column">
<h1>Achievements</h1>
<Paper
style={{backgroundColor:'red' , ':hover':{backgroundColor:'green' }}
>
<h1>Hi</h1>
</Paper>
</Grid>
</>
}
}
const mapStateToProps = (state) => {
return {
achievements: state.achievements
}
}
export default connect(mapStateToProps)(Radium(AchievementsHome));
With Material UI external styles ( so styles not directly from the Material UI library ) hardly ever work, to change the color on hover you will have to set a theme as explained in the Themes section of the docs
First grab the import withStyles and define a theme.
import { withStyles } from "#material-ui/core/styles";
const customStyles = theme => ({
root: {
backgroundColor: "red",
"&:hover": {
backgroundColor: "green"
}
}
});
Than define a new component that is wrapped with withStyles:
const CustomPaper = withStyles(customStyles)(Paper);
In your render use the component you defined:
<CustomPaper
/>
Hope this helps.
Material UI provides its own way of styling using CSS in JS (JSS). It provides a withStyles higher order component and a withTheme and lets you style at a global theme level. You can also pass class names for some components for custom styling.
You do not need to use Radium to style Material UI components.
Also your CSS selector for hovering needs to include the parent CSS selector:
const paperStyle = {
backgroundColor: 'red',
'&:hover': {
backgroundColor: 'green'
}
}
return (
<Paper styles={paperStyle}>
<Typography variant="h1">Hi</Typography>
</Paper>
);
Not really a problem but something I’m not happy with. I'm using react + typescript + css modules + https://material-ui-next.com/. Problem is that when I need to style material ui components I have to use !important a lot. Question is if there is a way to create styles without important. I create a sample project to reproduce the problem https://github.com/halkar/test-css-modules
material-ui exposes many of their components for styling. There two ways to go about doing this.
Apply styles globally
You could style the components globally and apply it to the theme. An example of this would be something like this (copied from the docs http://www.material-ui.com/#/customization/themes):
import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';
// This replaces the textColor value on the palette
// and then update the keys for each component that depends on it.
// More on Colors: http://www.material-ui.com/#/customization/colors
const muiTheme = getMuiTheme({
palette: {
textColor: cyan500,
},
appBar: {
height: 50,
},
});
class Main extends React.Component {
render() {
// MuiThemeProvider takes the theme as a property and passed it down the hierarchy
// using React's context feature.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar title="My AppBar" />
</MuiThemeProvider>
);
}
}
export default Main;
As you can see in here, appBar component have a height of 50px meaning that every time you add an appbar component to your app down the tree where you applied the muiTheme, it will give it a height of 50px. This is a list of all the styles you can apply for each component https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js.
Apply styles using style attribute
To apply the styles to individual components, you can usually use the style property and pass it the styles you want.
This is another example from the docs where a margin of 12px is applied to a RaisedButton.
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const style = {
margin: 12,
};
const RaisedButtonExampleSimple = () => (
<div>
<RaisedButton label="Default" style={style} />
<RaisedButton label="Primary" primary={true} style={style} />
<RaisedButton label="Secondary" secondary={true} style={style} />
<RaisedButton label="Disabled" disabled={true} style={style} />
<br />
<br />
<RaisedButton label="Full width" fullWidth={true} />
</div>
);
export default RaisedButtonExampleSimple;
Now, the styles are defined in the same file but you could define them in a separate file and import them to the file where you are using the components.
If you want to apply multiple styles then you can use the spread operator like so: style={{...style1,...style2}}.
Usually, you are styling a specific thing in the component (root element) with the style property but some components have more than one property to style different elements of the component. Under properties in this page http://www.material-ui.com/#/components/raised-button, you can see that there are style property, labelStyle and rippleStyle to style different parts of RaisedButton.
Check the properties under the component that you are using and see which style property you could use, otherwise check the available global style properties you could override. Hope this helps!
I should've used JssProvider and tell it to put material UI styles before mine in the page head section.
import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';
const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
jss.options.insertionPoint = document.getElementById('jss-insertion-point');
function App() {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
you have to use the component API's. You can't set style to the components imported from libraries just with css if the component has API's to get style.
*Update
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
},
label: {
textTransform: 'capitalize',
},
};
function Classes(props) {
return (
<Button
classes={{
root: props.classes.root, // class name, e.g. `classes-root-x`
label: props.classes.label, // class name, e.g. `classes-label-x`
}}
>
{props.children ? props.children : 'classes'}
</Button>
);
}
Classes.propTypes = {
children: PropTypes.node,
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Classes);
I'm using facebook's create-react app for my application:
In my Login.js container, I am importing CSS like so:
import React from 'react';
import '../../styles/users/Login.css'
const Login = () => {
....
The problem is the Login.css styles are being applied to my entire application... for example, if Login.css has:
body {
background:Red ;
}
The entire app would have a body of background: Red; Even outside of the Login container.
What I expected/want is for a CSS import within a container to only apply to that particular container.
Is that possible w React? How are react developers supposed to handle container specific stylings? Do I need to add an ID to all containers and include that in the entire CSS file?
1. Solution: Give your DOM elements class names to use them in your css.
JS:
// in Link.js
import React from 'react';
import '../../styles/Link.css'
const Link = ({children, href}) => (
<a className="link" href={href}>{children}</a>
);
CSS:
// Link.css
.link {
color: red;
}
2. Solution: Inline styles.
JS:
// in Link.js
import React from 'react';
import '../../styles/Link.css'
const Link = ({children, href}) => (
<a style={color: 'red'} href={href}>{children}</a>
);
3. Solution: CSS in JS.
There are some libraries that try to solve the styling issue:
Watch this talk: https://speakerdeck.com/vjeux/react-css-in-js
And have a look at this: https://github.com/cssinjs
styled-components: https://github.com/styled-components/styled-components
The best and easiest solution is to give classNames to every element you have in your code. I had the same issue when trying to apply widths and heights to my images and eventually found out that it was affecting whole app.