I'm using react with material-ui and I want to be able to change the styles of inner elements in components.
For example: the ListItem component has primaryText, leftIcon and such, and I want to change the style of the primaryText or the leftIcon and to play with the margins for example.
How do I do that?
use inline style:
<ListItem
style={{color: "#f7ca18"}}
primaryText="Hello"
leftIcon={<ActionGrade color={"#f7ca18"} />}
/>
Related
In my App component I have a navbar. This navbar is visible in all the chilren of my app component. I want to hide the navbar in one of the children. In order to achieve that I decided to use a ternary operator in order to apply a classname on the navbar component.
If the window.location.href is equal to the url of the component in which I want to hide the navbar, then a classname that hides the navbar is applied. However, my code is not working. I can still see the navbar in the component in which I want to hide it. When I inspect the document, I note that the classname that hides the navbar is not being applied. This is my code
<div className={window.location.href==='http://localhost:3001/checkin'
?
"navbar-hide"
:
"navbar"
}>
<Link to="/login">Login</Link>
<Link to="/EventManager">EventManager</Link>
</div>
The classname navbar is present regardless of the window.location.href.
I'm trying to use span to allow the events using grid-column to spread across multiple days in a calendar, but this seems to only work in css or styled-components. It does not work in inline-styles. Anyone have any idea to make this work with inline-styles?
codesandbox: https://codesandbox.io/s/react-event-calendar-8v9o1?file=/src/Components/CalendarEvent.js
Code Snippet:
<span
className="calendar-event-label"
styled={{gridColumnStart: col, gridColumnEnd: `span ${colSpan}`}}
onClick={onClick}
>{title}</span>
Use Style instead of Styled
style={{
gridColumnStart: col,
gridColumnEnd: `span ${colSpan}`
}}
I checked the changes in the code sandbox it works.
Working: https://codesandbox.io/s/react-event-calendar-forked-4s0h9
I am trying to style an HTML element inside the component from the Fluent UI React library.
What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the component is translated into:
<div>
<label></label>
<div id="target-me">
<button>
<span></span>
</button>
<label></label>
</div>
</div>
I want to add an inline-flex to the target-me div and set flex-flow property to row-reverse in order to get the button element to the right of the label element. The problem is, I can't manage to target the "target-me" div in my code.
How can I achieve this without rewriting a custom component ?
Thanks!
Ok, well I found the answer to my own question so here it is:
<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />
Essentially you can target different parts of the component (root, container, label..) by using the styles property. Use VS Code's Intellisense to find out what elements you can target inside the component and then just give it some regular CSS-in-JS that you want.
I am referring to the React Lazy Load Image Component.
I need to tweak the display attribute of the image I am rendering with this library. But can't seem to find any way.
I tried to wrap the component with a div and use style={{display: 'inline'}}, but it didn't work.
<div className="ui image" style={{ display: 'inline' }}>
<LazyLoadImage
src={src}
effect="blur"
/>
</div>
I am using this portion of code inside a <Card/> component. The default css of the library contains display: inline-block which is making my image have an extra border at the bottom. I don't want it.
P.S.
I am using Semantic UI for my entire project. I want to use whatever style Semantic is providing me. That's why I need to teak the display attribute of this library.
In https://github.com/ant-design/ant-design, how it the recommend method of adding spacing (margin) between buttons?
In semantic-ui, default margins defined within the library CSS. In bootstrap, one can use button groups to add spacing between buttons.
Is adding custom css or inline css the recommended way of achieving margins between buttons? Ideally, I want avoid writing any css when using a css framework
You can use https://ant.design/components/space/ to put spaces between your buttons or any other elements.
You can achieve that by simply wrapping your <Button> with <Space>
import { Button, Space } from 'antd';
<Space>
<Button>Default</Button>
<Button type="primary">Primary</Button>
</Space>
Two quick and dirty tricks
If you just want a tiny space in between, you can change
</Button><Button>
or
</Button>
<Button>
into
</Button> <Button>
and it will solve the problem
Alternatively put a {' '} in between, e.g. </Button> {' '} <Button>
I use styled components and components become really as components no global css, images and icons.
I define styles like this:
import styled from 'styled-components'
export default styled.div`
> button + button {
margin-left: 16px;
}
`
usually in a separate file for example: Controls.js
Then I use it as a component where it knows how to place the buttons (space between is 16px)
import React from 'react'
import Controls from './Controls'
import {Button} from 'antd'
export const Form = () =>
<Controls>
<Button type="primary" icon="check">
Accpet
</Button>
<Button type="danger" icon="close">
Cencel
</Button>
</Controls>
You can use ant design grid system.
Then use gutter property for Row component. That will add spacing between grids.
Put your buttons inside of a div. It will act as a button group.