This is my first question here and I'm a beginner to React app and semantic ui react, so sorry if my question is a little nooby.
So i created a menu using semantic ui react using after importing it.
Now I have an option to choose any background color for the menu among the given choices. But i want to set it to a custom color. So how do I target it in an override style sheet? I tried .ui.menu and failed. Here's the starting part of the code:
import React, { Component, createRef } from 'react'
import { Input, Menu, Image, Grid, Sticky } from 'semantic-ui-react'
import styled from 'styled-components'
import Link from 'next/link';
import { relative } from 'path';
export default class Navbar extends Component {
constructor(props) {
super(props);
}
state = { activeItem: this.props.currentPage }
contextRef = createRef()
render() {
const { activeItem } = this.state
return (
<div >
<Menu size="massive" className="size" pointing stackable>
<Image style={{ 'font-size': 50 }} avatar src='http://www.transitionsta.org/wp-content/uploads/2016/12/twitter-black-round-icon.png' className='logo' />
<Link href='/home'>
<Wrap>
<Menu.Item
name='HOME'
active={activeItem === 'home'}
position='right'
/>
</Wrap>
</Link>
<Link href="/contact">
<Wrap>
<Menu.Item
name='CONTACT US'
active={activeItem === 'contact us'}
position='right'
/>
</Wrap>
</Link>
<Link href='/aboutProfile'>
<Wrap>
<Menu.Item
name='ABOUT US'
active={activeItem === 'about us'}
position='right'
/>
</Wrap>
</Link>
</Menu>
So how would targeting Menu background color be done and how exactly would it differ from targetting a menu>item?
Thanks guys.
You can use
a className attribute (making sure it overrides current CSS, make use of !important when needed)
a inline style <Menu style={{ backgroundColor: 'red'}}>
Styled Components
Related
I have Home, Contact and About menu in sidebar and I want a separation line between these menus.
In semantic UI react showing these separations but on screen not showing.
My React code is below
import "./styles.css";
import React, { Component } from 'react'
import { Sidebar, Menu } from 'semantic-ui-react'
export class SidebarComponent extends Component {
state = { activeItem: 'Home' }
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return (
<div>
<Sidebar
as={Menu}
animation='overlay'
icon='labeled'
inverted
vertical
visible
width='small' >
<Menu.Item
name='Home'
active={activeItem === 'Home'}
onClick={this.handleItemClick}
>
Home
</Menu.Item>
<Menu.Item
name='Contact'
active={activeItem === 'Contact'}
onClick={this.handleItemClick}
>
Contact
</Menu.Item>
<Menu.Item
name='About'
active={activeItem === 'About'}
onClick={this.handleItemClick}
>
About
</Menu.Item>
</Sidebar>
</div>
)}}
export default SidebarComponent;
After running my code I got this type of output ( Output image below)
Current Output
But I want this type of output (below)
Required Output
2 ways in which you can add a divider-
Using semantic-ui-react
Using Vanilla CSS
Using semantic-ui-react
import Divider from semantic-ui-react.
import { Sidebar, Menu, Divider } from 'semantic-ui-react'
And add this line of code after the first and second Menu.Item
<Divider fitted />
Using Vanilla CSS
in styles.css add -
.ui.vertical.menu .item{
border-bottom: 1px solid #000000;
}
this will add border-bottom for every item.
I'm using MUI v5 in my project and trying to apply styling to a Drawer so that the background color is black. Since this update was pretty recent I can't find much info on changing the styling of the component without using deprecated elements from MUI v4. Any tips for this? I would also appreciate some advice on applying a color that I've defined using createTheme from MUI as well.
import React from "react";
import {
Divider,
Drawer,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
} from "#mui/material";
import AddIcon from "#mui/icons-material/Add";
import SearchIcon from "#mui/icons-material/Search";
import HomeIcon from "#mui/icons-material/Home";
import qdjLogo from "../../assets/qdj_logo.png";
import "./styling/SideBarStyling.css";
import ProfileFooter from "./ProfileFooter";
function Sidebar() {
return (
<div>
<Drawer variant="permanent" anchor="left">
<div className={"wrapper"}>
<a href="">
<img className={"icon"} src={qdjLogo} alt="QDJ Logo" />
</a>
</div>
<ProfileFooter />
</Drawer>
</div>
);
}
export default Sidebar;
You can change the background color of the Drawer by styling the Paper component inside it using the sx prop:
<Drawer
PaperProps={{
sx: {
backgroundColor: "pink"
}
}}
{...}
/>
If you want to set the background-color to black, maybe you want a dark theme? You can configure MUI theme to automatically set the dark background for Paper by setting the dark mode like this:
const theme = createTheme({
palette: {
mode: "dark"
}
});
<ThemeProvider theme={theme}>
<Content />
</ThemeProvider>
Reference
https://mui.com/guides/migration-v4/#migrate-from-jss
You can simply override the theme like this:
const theme = createTheme({
components: {
MuiDrawer: {
styleOverrides: {
paper: {
background: "orange"
}
}
}
}
});
Here is a sandbox
Good day, im attempting to add custom CSS to a material UI App Bar but all the styles i apply using the makeStyles function is overridden by the default Material UI styling. The only fix is to apply !important to my styling but I dont see this as a viable workaround. Following the docs it states to use the StylesProvider component to configure the CSS injection order but this also hasnt proven any results. Please any help will be greatly appreciated here is an example of what ive attempted to do.
Index.js
import React from 'react';
import { hydrate, render } from "react-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import 'typeface-roboto';
import { StylesProvider } from '#material-ui/core/styles';
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
hydrate(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
} else {
render(<StylesProvider injectFirst><App /></StylesProvider>, rootElement);
}
serviceWorker.unregister();
Component that uses MakeStyles
const navBarStyles = makeStyles((theme) => ({
link: {
margin: theme.spacing(1, 1.5)
}
}));
export default function NavbarComponent() {
const classes = navBarStyles();
return (
<AppBar position="static" elevation={0}>
<Toolbar className="flex-wrap">
<Typography variant="h6" color="inherit" noWrap className="flex-grow-1">
test
</Typography>
<nav>
<Link variant="button" color="textPrimary" href="#" className={classes.link}>
Features
</Link>
</nav>
</ToolBar>
</AppBar>
)}
Note im using React-Snap with this project so im not sure if that is the reason it is breaking, https://www.npmjs.com/package/react-snap
You can override the MUI styles using theme provider
check theme provider
Or can use classes property in Mui Component. classes
Use sx={{}} property directly in the navbar.
Something like this
<AppBar position='static' sx={{ borderRadius: '9px', color="inherit" }}>
//Other components
</AppBar>
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);