Hi I just started using Material UI and am having a hard time styling the components. I am building a sign in page and would like my Submit button to be all the way to the bottom right. If someone can help me out that would be greatly appreciated because it seems to be inheriting styles from everywhere else but where I would like to!
I have tried adding
textAlign: 'right'
to buttonStyle and that does not work. I have also tried adding
text-align: right;
to my .form-button CSS.
The only thing that affects anything is removing the .App
Login.js
<div className='form-container'>
...
<Button
style={buttonStyle}
className='form-button'
variant='contained'>
Log-In
</Button>
</div>
...
const buttonStyle = {
backgroundColor: '#527354'
};
App.css
.App {
text-align: center;
}
.form-button {
width: 83px;
height: 36px;
box-shadow: 0px 1px 3px #00000033;
}
.MuiButton-label {
color: var(--primary-white);
font-family: 'Open Sans', sans-serif;
}
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
Another main goal would be to avoid inline styling because I do prefer keeping it within my style sheet. But if not possible or too overly difficult, I will inline style (as I did with the background-color).
As keikai has mentioned in the comment, you may check the Documentation in this link material-ui.com/styles/basics for overriding style.
For 'it seems to be inheriting styles from everywhere else'
I will suggest you to use styled-components instead of global css import, which mess up everywhere. Try this,
npm install --save styled-components
It creates a css class that only apply to the component.
Sample code:
import styled from 'styled-components'
const MyDiv = styled.div`// can be span, section, etc
// add your style here for the div
your div style(optional)
// your class css inside the div
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
// add more class if you have any
`
Then wrap your component with
// your newly created styled div
<MyDiv>
// component that needs your style
<MyComponent />
</MyDiv>
Your style will only be applied to MyDiv and MyComponent, and nothing else.
It may took awhile to get used to it, but it is extremely useful.
Related
I'm quite new in React.
My app contains 3 datepickers, and i can only use the classic datepicker plugin from React: react-datepicker(4.8.0).
Problem is, on my design, these datepickers don't have the same style.
Another problem is that the only way for me to have a custom datepicker is to override datepicker css classes in App.css (global file), like this :
.react-datepicker__header {
text-align: center;
background-color: white;
border-bottom: none;
border-top-left-radius: 0.3rem;
padding: 8px 0;
position: relative;
font-family: "Nunito Sans", serif;
}
For example, i want to custom this class for another component in which i use a datepicker from the same plugin. I tried using "id" on datepicker, but doesn't work.
My DatePicker looks like this in the code :
<DatePicker
id="filterDatePicker"
dateFormat={"dd/mm/yyyy"}
onChange={(date) => {
const dateSelected = moment(date);
console.log("date selected ? " + dateSelected);
setDate(dateSelected);
}}
showPopperArrow={false}
open={isDatePickerOpened}
></DatePicker>
Anyone to help me solve this?
EDIT
Following this link : react-datepicker input width will not adjust to 100%
I tried to set in my App.css like this after wrapping datepicker in a div with specific class :
.filterIssueDateDatePicker > div > div.react-datepicker__navigation-icon::before {
border-color: #7695f7;
border-width: 1px 1px 0px 0;
}
It doesn't work, can someone help me for this specific example of changing navigation icon in only one datepicker?
I just started learning ReactJS and I made a Project with .scss
For some reason when I add a style in a .scss file that style also changes other components' styles as well.
example:
I add a li style in the Home.scss, but it will change the style of the Footer component's li too. I didn't import it into the Footer.js or anything.
Does anyone know what is the reason why does it do it, and what is the solution?
Adding a className per component won't solve your problem, it will work as expected until you have any nested component.
Because if you add
#component-name {
li {
...
}
}
The CSS will be applied to any component inside of that component too.
To limit your CSS to a component in react, you have a few options :
CSS Modules
Create React App supports CSS Modules out of the box (as of version 2)
It works with SCSS too (YourComponent.module.scss)
YourComponent.js:
import styles from './YourComponent.module.css'
export const YourComponent () => {
<ul>
<li className={styles.yourLi}>
</ul>
}
YourComponent.module.scss:
.yourLi {
color: blue;
}
CSS-in-JS
With this method, as the name suggests, you can declare your CSS within your JS.
There are multiple libraries to implement this.
Styled-Components
Here is an example with styled components which is the one that seems to be the most used as of today:
const YourLi = styled.li`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
`
render(
<div>
<ul>
<YourLi>
Your styled li
</YourLi>
</ul>
</div>
)
Add a class footer in the first div of footer component
sass allows nested defining of classes like
.footer{
li{
}
}
using that can help.
since it doesn't matter where you import scss in react. styles are imported globally by default.
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
I have a css module which apply styling to an existing component. The css module works fine but the styling was always overwritten by the default style of component.
Supposed I have this markup.
<Header className={styles.header}>
<Row type="flex" justify="space-between">
<Col>
<Link to="/">
<Title className={styles.brand}>Shiritori</Title>
</Link>
</Col>
</Row>
</Header>
Then uses the styles declare in the css module:
.header {
background: rgb(75, 191, 107);
margin-bottom: 1rem;
> div {
align-items: center;
}
}
I expect that the background css property of the default style will be overwritten but instead the styles in my css module was canceled out.
Actual result:
.ant-layout-header {
height: 64px;
padding: 0 50px;
line-height: 64px;
background: #001529;
}
.ant-layout-header, .ant-layout-footer {
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.ant-layout, .ant-layout * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.App_header__37gyT {
background: #4bbf6b; <- this property was overwritten by the .ant-layout-header background property
margin-bottom: 1rem;
}
I also consider the order of css/scss import but same result.
import "../../../node_modules/antd/dist/antd.css";
import styles from "./App.module.scss";
Is there a way to overwrite existing style of a component. I use antd for the UI toolkit and components.
Unable to replicate your issue. Seems to be working fine:
That said, when dealing with CSS specificity, you can do one of several things:
Overwrite a child class style from a parent class style.
Use the id property: <Header id="header-id">Header</Header> (then use the # to refer to header: #header-id { ... })
Overwrite the .ant-layout class name within a separate CSS/SCSS file.
Add an !important declaration after the style property, for example: background: pink !important;
That said, I'd avoid importing the entire CSS library and instead use the babel plugin to import only what's needed.
I am having trouble removing these huge white margins on my react project. Below are some of the solutions I have tried.
* { margin: 0; padding: 0; }
/-/-/-/
body {
max-width: 2040px;
margin: 0 auto;
padding: 0 5%;
clear: both;
}
I have tried every variation. My only installed dependencies that should affect anything CSS wise is bootstrap and I don't think thats it. I tried adjusting max-width to a value of 2040px just to test if it would work and there appears to be a limit to which I can set the width. Help would be appreciated.
I should also mention that this is persistent throughout the entire page. This issue is not limited to the background image which I am linking in the css file
White Margins
All the browsers uses different default margins, which causing sites look different in the other browser.
The * is wildcard, means all elements present in our site (consider as universal selector), so we are setting each and every element in our site to have zero margin, and zero padding, to make the site look the same in every browsers.
If your style not getting applied then you can use !important to override style,
* {
margin: 0 !important;
padding: 0 !important;
}
If you created it using create-react-app there will probably be a file public/index.html.
There is a tag wrapped around the root where React will inject you App.
Usually the browser style-sheet set the margin of <body> to 8px.
That's most likely that white margin around your App that you're struggling to get rid off.
To remove it, one option is to open public/index.html and set the margin to 0 using inline styles like this:
<body style=margin:0>
In case you're using #emotion/react for styling you may alternatively (still assuming that there is this body tag in public/index.html) leave it as <body> and use the <Global> component to define styles for <body>. Something like this in your App.js:
function App() {
return (
<div>
<Global
styles={css`
body {
margin: 0;
}
`}
/>
<Your />
<Other />
<Components />
</div>
);
}
export default App;
User agent style sheet overrides the custom style. You can override this using !important in normal html and css
It is better to user react spacing library, rather than overriding the user default style sheet https://material-ui.com/system/spacing/
or you can use the following
<body id="body">
<div id="appRoot"></div>
</body>
style sheet
body
margin: 0
padding: 0
button
padding: 10px 20px
border-radius: 5px
outline: none
React JS code blocks
class A extends React.Component{
componentWillMount(){
document.getElementById('body').className='darktheme'
}
componentWillUnmount(){
document.getElementById('body').className=''
}
render(){
return (
<div> Component A </div>
)
}
}
class App extends React.Component{
constructor(){
super()
this.state = {
isAMount: false
}
}
handleClick(){
this.setState({
isAMount: !this.state.isAMount
})
}
render(){
return (
<div>
<button onClick={this.handleClick.bind(this)}> Click Me</button>
<div> App </div>
<hr />
<div> {this.state.isAMount && <A /> } </div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('appRoot'))
If you try:
* {
margin: 0 !important;
padding: 0 !important;}
You may have some issues. As I was using some mui, so this was distorting my components. I may recomend to modify the "body" in public/index.html using:
<body style=margin:0>
As you are using background image. Its problem due to image size ratio.
You have to use background-size: cover property in css.
Also use appropriate background-position to make sure the gavel comes in center bottom of page.
I was trying to add a background image in my react app but react left some margin on top and left.
const useStyles = makeStyles((theme) => ({
background: {
backgroundImage: `url(${Image})`,
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
width: '100vw',
height: '95vh',
}
After reading the documentation, I realized that it was not margin, but positioning of the image. Setting the position:fixed with top:0 and left:0 fixed the issue.
After reading the answers above and trying them I have concluded that the best way is to keep your index.css(note: that the index.css in particular has the margins already set to 0 globally.) and App.css files that are auto generated when you "npx create-react-app".
I have noticed that many beginner tutorials tell you to remove these files and more, but after facing this problem it is honestly easier to just edit the boilerplate than start from scratch.
Simply add to the app.css or your main CSS file
body { margin: 0; padding: 0; }
* { margin: 0; padding: 0; } override by browser.
try
html,body{
margin:0;
padding:0;
}