I use Create React App with embedded CSS-modules, and installed Bootstrap library. There is an example code:
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);
App.jsx
import React from 'react';
import styles from './style.module.css';
const App = () => (
<nav className={`navbar fixed-top ${styles.navbar}`}>test</nav>
);
export default App;
style.module.css
.navbar {
background: #fff;
height: 100px;
padding: 1.5rem 0;
box-shadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
}
But as a result the styles from Bootstrap erase my styles:
wrong styles
How can I change this behavior?
This is happening due to the order at which React adds the styles to your page.
App is a child component in your index.js page, so it's styles will be applied first. Then as React moves up to the parent level of index.js, it will then apply the bootstrap styles to the page. Since both the bootstrap styles and your styles are of equal specificity, the bootstrap styles will take priority.
The easiest solution would be to increase the specificity of your custom classes that conflict styles with Bootstrap styles.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You may also be able to import the Bootstrap styles in your App component before importing your CSS modules.
Related
I am working on project in which I have to use Material UI, just for simplicity, consider I am having a simple functional component in which I am having 2 Material UI components Button and Text Field
import React from 'react';
import { Button, TextField } from '#material-ui/core';
function RenderComponent(){
return(
<>
<Button variant="contained">Contained</Button>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</>
)
}
export default RenderComponent
Can anyone please tell me how to override the css properties of these 2 Material UI components.
Thankyou 🙏
There are several ways to do this, you can directly override the built-in CSS class of an MUI component using the class name in your imported CSS file, for example in if you want to change the Button component's style, you can do this by applying your required CSS properties to .MuiButton-root class on your "CSS" file. Like bellow.
.MuiButton-root{
color: white;
height: 20px;
padding: 10px;
}
You can also use the available props of a component, you can easily find them in their individual documentation page of mui site.
Again you can use makeStyles or styled to style your component.
Here is an example to use makeStyles in your Button component.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { Button, TextField } from '#material-ui/core';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
function RenderComponent(){
const classes = useStyles();
return(
<>
<Button className={classes.root} variant="contained">Contained</Button>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</>
)
}
export default RenderComponent
You can find more about styles here.
Give them id's/classes and write your custom CSS for them. If it doesn't override the standard Material-UI styles, add the keyword !important. If you are using create-react-app, you can import CSS right to the file like this:
import "./styles.css";
If this doesn't help, that means Material-UI uses inline styles for the elements. In this case, you would have to write your CSS right into your components' attributes: like this. If it doesn't override standard styles, use !important again.
I am new to react styled-components. I want to reset the default margin for all elements. I did it using createGlobalStyle as
import { createGlobalStyle } from 'styled-components';
import normalize from 'normalize.css';
export default createGlobalStyle`
${normalize}
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
`
and updated my index.js to be
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import GlobalStyles from './[path]/GlobalStyles';
ReactDOM.render(
<>
<GlobalStyles />
<App />
</>,
document.getElementById('root')
);
However, when I use an h1 element, I noticed that it has default margins, and it's gone only when I specify the h1 element with zero margin in my global styles.
Why? and how can I reset the margin for ALL elements using * selector?
Need to use theme spacing value in a styled component like below with no success.
When I first created it, style was applied to button. But now, no style is applied!
You can see it here: sandbox.
import React from "react";
import styled, { ThemeProvider } from "styled-components";
import {
createMuiTheme,
ThemeProvider as MuiThemeProvider,
darken
} from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
const customTheme = createMuiTheme({
palette: {
primary: {
main: "#6772e5"
}
},
spacing: 8
});
const StyledButton = styled(Button)`
${({ theme }) => `
background-color: ${theme.palette.primary.main};
color: #fff;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
padding-left: 20px;
padding-right: ${theme.spacing(2)};
font-size: 13px;
&:hover {
background-color: ${darken(theme.palette.primary.main, 0.2)};
}
`}
`;
export default function App() {
return (
<MuiThemeProvider theme={customTheme}>
<ThemeProvider theme={customTheme}>
<StyledButton>Customized</StyledButton>
</ThemeProvider>
</MuiThemeProvider>
);
}
Your styled-component styles is overridden by the default JSS styles. By default, JSS styles is injected at the bottom of the <head> (higher CSS specificity). You can tell MUI to override JSS styles by putting your component tree inside <StylesProvider injectFirst>. See controlling priority.
// tell MUI to inject JSS style first, so styled-component can override it
<StylesProvider injectFirst>
<MuiThemeProvider theme={customTheme}>
<ThemeProvider theme={customTheme}>
<StyledButton>Customized</StyledButton>
</ThemeProvider>
</MuiThemeProvider>
</StylesProvider>
I'm new to react and I have a quick question about styling imported components. I made a basic Title component that simply outputs the props passed. My Title.js file:
import React from 'react';
import '../App.css'
class Title extends React.Component{
render(){
return <h1>{this.props.prop}</h1>
}
}
export default Title
I'm using it in my App.js file and trying to style it via a className
import React from 'react';
import Title from './components/Title'
import './App.css';
function App() {
return (
<Title className = 'title' prop = 'Title!'/>
);
}
export default App;
my css:
.title{
background-color: rgba(255, 0, 0, 0.2);
text-align: center;
margin-top: 100px;
padding: 20px;
border: solid black;
}
This does not works, even if I apply an inline style to the Title tag. However it does works when I apply the className to the h1 tag within the Title.js file. Is it because everything written within the Title tag is just passed as a prop? If that's true how are third-party library components styled? Any help is much appreciated!
In order for this to work the way you want to, you need to pass the className prop form your Title component to the h1 inside it:
class Title extends React.Component{
render(){
return <h1 className={this.props.className}>{this.props.prop}</h1>
}
}
I have a simple React App, using Redux's Provider to wrap my App component.
import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
import registerServiceWorker from './registerServiceWorker';
const MainContainer = styled.div`
margin: 0;
padding: 0;
height: 100vh;
background-color: red;
`;
ReactDOM.render(
<MainContainer>
<Provider store={store}>
<App />
</Provider>
</MainContainer>,
document.getElementById('root'),
);
registerServiceWorker();
However, when this app renders, there's a white gap around the edge (all sides) of the screen. What's the correct way to override the body tag so that the App content goes to the edge of the screen?
That's the default styling of your browser. You could use something like Normalize.css, or simply remove the margin and padding of the body yourself.
body {
margin: 0;
padding: 0;
}
You can do this with injectGlobal.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
Thanks for the answers, but I was looking for a Styled Components specific answer.
Turns out that Styled Components has a helper method, injectGlobal, which can override the global body tag.
Using this, one can set the desired properties – in this case, no margin / padding. So, adding the following to index.js solves the issue.
import { injectGlobal } from 'styled-components';
injectGlobal`
body {
margin: 0;
padding: 0;
}
`;
For styled components v4 and onwards use createGlobalStyle instead:
import { createGlobalStyle } from "styled-components"
const GlobalStyle = createGlobalStyle`
body {
color: red;
}
`
// later in your app's render method
<React.Fragment>
<Navigation />
<OtherImportantTopLevelComponentStuff />
<GlobalStyle />
</React.Fragment>
Styled Components FAQs
In your "App.css" write this :
body {
overflow-y: hidden;
}
That's working for my home page.