I am importing an icon from the library and would like to rotate it by 90 deg in my code to make it look like my requirement. I am trying to apply transform attribute but its not working. It's working fine when I try that attribute in developer tools.
<IconButton
flat
primary
icon={
isAllExpanded ? (
<ChevronRightDoubleIcon width={16} color={ICON_COLOR} transform='rotate(90deg)'/>
) : (
<ChevronLeftDoubleIcon color={ICON_COLOR} />
)
}
/>
I also tried to wrap it in a separate div element and apply css styling but that changes all the icons in the page even though I wrap the div element around this Iconbutton.
<DoubleArrow>
<IconButton
flat
primary
icon={
isAllExpanded ? (
<ChevronRightDoubleIcon width={16} color={ICON_COLOR} />
) : (
<ChevronLeftDoubleIcon color={ICON_COLOR} />
)
}
/>
</DoubleArrow>
export const DoubleArrow = styled.div`
#ChevronRightDoubleIcon {
svg {
transform: rotate(90deg);
}
`;
Is there a way to apply svg transform styling when I use the icon tag that I need ?
Related
This is how my problem looks like (see the ring) :
View Image
Using the Chrome's inspector found that it is related to --tw-ring-shadow.
So I tried adding classes like ring-0 and ring-offset-0 (as you can see below) but it didn't work!!
import { TextField } from "#mui/material";
function ContactForm(): JSX.Element {
return (
<div className="form-container pt-12 flex flex-col items-center">
<div className="input-row">
<TextField
className="ring-offset-0 ring-0"
label="First Name"
variant="outlined"
/>
</div>
</div>
);
}
export default ContactForm;
Do you have any idea for how can I get rid of this annoying border that overlaps the input field??
I'd appreciate your help!
You could try overriding the Tailwind CSS variable for input fields by adding the following in your application's CSS:
input {
--tw-ring-shadow: 0 0 #000 !important;
}
Alternatively...we can't see the code generated by <Textfield> to ensure that your Tailwind utility classes are being applied correctly to the input element, but if they are not, you could try targeting the <input> field directly using #apply in your CSS file:
input {
#apply ring-offset-0 ring-0
}
I have a Material UI component, and I am trying to custom style it using the CSS.
Following is the code:
<IconButton className="my-class">
<Close />
</IconButton>
CSS:
.my-class {
float: right;
margin-left: auto;
margin-right: 0;
}
But I am not able to style it, when I tried the following, it works:
<IconButton style={{ float: 'right', marginLeft: 'auto', marginRight: '0' }}>
<Close />
</IconButton>
Why I am not able to style the Material UI components using regular CSS?
Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives MUI precedence over your custom styles.
You need to use the StyledEngineProvider exported from #mui/material/styles with the injectFirst option, in order for the CSS injection order to be correct. It is explained here.
So something like this shoud work:
<StyledEngineProvider injectFirst>
<IconButton className="my-class">
<CloseIcon></CloseIcon>
</IconButton>
</StyledEngineProvider>
You can style MUI components using several ways like GlobalStyles API, sx, styled or even normal way.
If you are going to style the particular component like IconButton, and if you have a look at the document for the API, you can find the class names for the component.
Here's couple of references.
https://mui.com/customization/how-to-customize/#main-content
How to give conditional style to MUI TextField?
I migrated from Material UI 4 to 5 Beta in my react app. From the documentation (docs style library) I can see that now I can use emotion, but when I use it I receive a message in the css attribute of the element where I use it.
My code:
import { jsx, css } from '#emotion/react';
//Other code.....
return (
<IconButton
css={css`
margin-left: 10px;
`}
//css={css({ marginLeft: 10 })}
aria-label='show 4 new mails'
color='inherit'
>
<Badge badgeContent={1} color='secondary'>
<MailIcon />
</Badge>
</IconButton>
)
If i inspect HTML, inside thebutton that is rendered i can see the attribute css like this css="You have tried to stringify object returned from 'css' function. It isn't supposed to be used directly (e.g. as value of the 'className' prop), but rather handed to emotion so it can handle it (e.g. as value of 'css' prop)."
I tried css prop with backtick and css function but none is working.
EDIT:
Changed marginleft into margin-left (this was an error while copiyng the code form my project)
I solved this ussues by adding /** #jsxImportSource #emotion/react */ in top of my import
According to my research I can change the style of ANT components using the "style" prop (Even though that's not exactly in the docs of the Spin component)
Here's my attempt:
<Col>
{userCompaniesLoading ? (
<Spin style={{ color: 'white' }} />
) : (
<UserOutlined
onClick={() => {
setDrawerVisibility(!isDrawerVisible);
}}
/>
)}
</Col>
On inspect, each dot of the Spin is a "<i class="ant-spin-dot-item"></i>", and the color property does not work. So, how can I change the color of the Spin component?
You can set the Spin Component Color by adapting the background-color of the ant-spin-dot-item in your component css file.
.ant-spin-dot-item {
background-color: red;
}
Here is a CodeSandBox demo with a changed index.css.
Btw. a more robust and production ready way to adapt antd style is to create a custom theme.
Using a customized Webpack config works good in my project.
Also if you want to change the color of the tip you need to change this class:
.ant-spin-text {
color: #999; }
Looks like before tip class was .ant-spin-tip, but that didn't work for me.
Just sharing this in case it helps someone :D
I've successfully implemented the Semantic UI React Dropdown like this:
<div>
<Form.Label>Search and Select Company</Form.Label>
<Dropdown
name='company'
data-testid='companiesDropdown'
placeholder='Ex. Goodyear'
className={classes.errorState}
fluid
search
searchInput={{autoFocus: true}}
selection
options={companies
? companies.map((company, key) => {
return (
{key: key, value: company.company_id, text: company.company_name}
)})
: null}
value={(companyId > 0) ? companyId: null}
onChange={handleDropdownChange}
/>
{determineErrorMessage('companyId')}
</div>
Now I'd like to change the border color if the element is in an error state such as the user hasn't picked an item yet. To do this with any other HTML element, I can just set the className but it doesn't seem to work with this element.
In the example above, I'm just hardcoding the className={classes.errorState} where errorState: { borderColor: 'red' } but doing so doesn't work.
Any ideas on how to get this working properly?
P.S. As a temporary fix I added a <div> wrapper around it which kind of works except you can clearly see the border of the <div> and the border of the <Dropdown> element.
HI i reworked the semantic example for you
As it's a div and not a true HTML list try it like this
CSS
.dropdownRed {
border: 1px solid red !important;
}
JSX
<Dropdown.Menu className={errClass}>
Link to working codesandbox demo