Inside my react-router-dom Link, I have an icon. Whenever this icon is clicked, it turns red. How can I prevent this?
Gif showing the problem
That color comes from default css for html a elements.
You just need to override the css color of the link.
Simple example:
.my-link {
color: inherit;
}
Related
In my React form I am using Formik, Yup and Material ui form and textfield:
import { TextField } from '#material-ui/core';
for my E-mail form.
When I blur out the field it's generating the following HTML:
<p class="MuiFormHelperText-root MuiFormHelperText-contained Mui-error">This field is required.</p>
How do I add an svg icon to this helper text?
For example a React component <HelperText icon={MyIcon} />, is that possible?
You can add the svg with css class from the global styles.css file, it is not a best practice but it's a nice workaround if there is no other solution for this situation.
Similarly easy to using SVG as an img, you can use it in CSS as a background-image.
for example:
.MuiFormHelperText-root MuiFormHelperText-contained Mui-error {
display: block;
text-indent: -9999px;
width: 100px;
height: 82px;
background: url(example.svg);
background-size: 100px 82px;
}
Notice we set the background-size to the size of the logo element. We have to do that otherwise we’ll just see a bit of the upper left of our much larger original SVG image. These numbers are aspect-ratio aware of the original size. But you could use a background-size keywords like contain if you want to make sure the image will fit and can’t know the parent image will be of the exact right size.
I am using react-scroll in react and i am trying to scroll the container div overflow-y after doing an action click in a button, but the function scrolls the body overflow not the container div. How can i do it?
The body has overflow: hidden, and the container div has overflow-y: scroll
Please check this link : https://medium.com/how-to-react/scroll-to-an-element-on-click-in-react-js-8424e478bb9
if you face any problem following the doc then open the code sandbox and play with the code and see the demo.
I learn ReactJs and the react-bootstrap NavBar. I wanted to have a fixed="top" NavBar so it is always visible. So the content is scrolled under it!
The two problems i have here in my CodeSanbox is that the side-bare that the NavBar menu opens is under the NavBar.
I think I know why it's because of the fixed="top" property on the NavBar. I have tried to understand how it works and it looks like I have to calculate the NavBar height and set that as top margin for the side-bare. Any better idea or if I'm wrong here please advice?
My other problem is the size of the 3-strip icon Hamburger menu. How can I change it to be bigger? I read the docs and I see no information for this?
For the .side-drawer, you can adjust the top property (e.g., top: 146px) or you can add some padding to the sidebar element so that it makes space for the header.
.side-drawer {
padding-top: 160px;
}
As for the hamburger button dimensions, I recommend resizing .navbar-toggler-icon
.navbar-dark .navbar-toggler-icon {
height: 100px;
width: 100px;
}
import React from 'react';
import Button from '#material-ui/core/Button';
export default function DisableElevation() {
return (
<Button variant="contained" color="primary" disableElevation >
Disable elevation
</Button>
);
}
It is quite simple just make border:none and outline:none that's it for a corresponding component.
style={{
border:"none",
outline:"none"
}}
I also got this issue
The problem was using both MUI and bootstrap. remove importing 'bootstrap/dist/css/bootstrap.min.css' in project and after remove bootstrap, problem will solve
you don't need this both libraries for ui dev works you can do most of things by using one. You can use either MUI or bootstrap as your wish but using both in same project cause to UI effects
I am using material UI. also it has taken a lot of time to figure it out how to remove it after clicking the border. I found a way to remove the border using the below code it will help.
"&.MuiDataGrid-cell:focus-within": {
outline: "none",
},
There seems to be an automatic greying of the original button color when applying "disabled" to <Button>. I want to change the color completely.
Current button:
<Button disabled>{example}</Button>
Current styling that is not overwriting the greying:
.labels .button{
background-color: #6363FA;
margin: 10px;
color: #F2F1F7;
}
Hoping to be able to apply a new background-color for disabled somewhere
From my experience, here's one good way you can restyle a Button like that
(Follow the guide here: https://react.semantic-ui.com/theming/#theming-with-create-react-app first if you haven't setup theming!!)
Go and edit some-location/semantic-ui/site/elements/button.overrides, add a class like .ui.huge.disabled.button for a <Button /> with properties size='huge' disabled
sample button disabled css class
Which will result in something like this:
button screenshot
By the way, I found that class name above by inspecting it in the browser:
css class in inspector
I hope this is clear! If you have any questions, let me know :)
PS: Sorry didn't have enough rep to embed images...
EDIT: Forgot to mention, in the CSS example above, #gold and #black are custom colors I added into semantic-ui/site/globals/site.variables
I found a simpler way. I'm using Semantic UI React - not sure if that matters.
I have a css class for the button:
.main-app .landing-page .quick-search {
background-color: #41B3A3;
color: rgba(255,255,255,0.9);
}
and I add one like this and it works to respond to the disabled property
.main-app .landing-page .quick-search:disabled {
background-color: #f5f7f6;
color: rgba(56, 143, 89, 0.9);
}