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
Related
How can I change the background color of the Table Row, I tried using "BackgroundColor" but it didn't change
How can i solve the problem?
<TableRow style={{ backgroundColor: "#FF0000" }}>
<TableCell>
<Button>All</Button>
</TableCell>
</TableRow>
try: background-color instead of backgroundColor
Never used react before, thats just the traditional css way.
Your code should work fine. See below for a working example with your exact same attempt:
You can find the codesandbox reproduction here. You can also look into the sx prop when working with MUI components.
Doing components for app. For section want to add ability to pass some optional accent color to get output like:
<section style="--mycolor:red">
... //contents
</section>
where "red" can be passed in backend during page build as color name, #hex, "rgba()" or "hsla()" strings. It gives opportunity to use that color to children elements of this section - for border colors, first letters, markers, backgrounds etc.
Simple code^:
<section style={`--mycolor:{color}`};>
does not work because next expects mappable code, but looks like css variables names aren't parse-able in inline syntax.
I can also inject it with <style jsx> statement:
<style jsx>{`
section{
--mycolor: ${ color != '' ? color : 'var(--default-color)'};
}
`}
</style>
but this soluition looks "dirty" for such simple task - adds tons of unnecessary code just to serve one css rule.
I think it can be achieved with something like
<section styles={myStyle}>
where myStyle is jsx style object, but i don't understand how to manually create it (in examples its only imported prop w/o details where did it get from).
So is there a way to achieve simple output like <section style="--mycolor:red"> ?
#juliomalves, thanks for help, final solution is like
style={{ '--mycolor': color }}>
where:
'--mycolor' = css variable name quoted as string (css properties are not quoted !)
color = prop of an element
If using TypeScript with Nextjs, there is very simple solution as blow
{{ ['your css variable name' as any] : your value}}
e.g.
['--rating' as any]: 2.5,
['--star-color' as any]: '#b3b3b3',
incase if you want to insert inline styling using style tag in next.js , you have to insert an object inside the style={} tag as all of the style and classNames in next are considered as object . For example you want to insert the background colour of your div using the insline styling than do the followings
<div style={{ ["background-color" as any]: "#ffc107" }}></div>
do make sure that You use semicolons to insert style properties
I need to use a transfer component from antd for a page, but the default size is way too small. I have tried to change it using the listStyle and style attributes. I've read through the documentation and don't see any other style options. When it's rendered, I can see that I need to change the size of the "ant-transfer-list"
<TransferComponent
style={{
height:1000
}}
listStyle={{
width: 1000,
height: 1000,
}}
formattedInput={this.state.formattedObjectTypes}
onSelectChange={this.onSelectChange}
sourceName="Available"
targetName="Selected"
/>
My jsx is as shown. I've tried both height:1000 and height:"1000px" with no change on either listStyle or style.
The property listStyle works for me:
<Transfer
listStyle={{width: 500}}
/>
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.
I just started using react with bootstrap and implemented a navbar. I can see that bootstrap has many functionalities, however I also see that it is limited in functionality, or, it doesn't give as much 'freedom' in terms of customization. I hope I am wrong but here is my example:
<Grid>
<Row className="text-center">
<h1>Our Products</h1>
</Row>
</Grid>
This code renders the <h1> in the middle of the screen no matter your device size. It works perfectly!
<Navbar>
<Navbar.Brand className="text-center">
<a className='menuItem' href="#home">Sample Text</a>
</Navbar.Brand>
</Navbar>
This is supposed to render a navigation bar with the <Navbar.Brand> in the middle of the screen. The problem is that it has no effect!
I also tried to apply style instead of the className, or even define my own className and work with it in a .css file but it never works. Is this a limitation of React Bootstrap?
I have been able to do something like this to put the text in the middle
<Grid>
<Row className="show-grid">
<Col xs={4} md={5}></Col>
<Col xs={4} md={5}>{this.props.children}</Col>
<Col xs={4} md={5}></Col>
</Row>
</Grid>
I would still like to know how to use the className="text-center" to place the <Navbar.Brand> in the center or, any way to customize it.
I think you can change the default text alignment inside a file named "App.css" that comes with React package
I found out that this problem is pretty common and in most cases has no answer (here, tried every solution offered here but didn't work). I found out that the only way to make it work is to define a custom-className and edit it in CSS. Weird is that it doesn't work with inline styling for me!
The code becomes:
<div>
<Navbar>
<Navbar.Brand className="navbar-brand-custom">
<p>Metanice</p>
</Navbar.Brand>
</Navbar>
</div>
with an external css
.navbar-brand-custom {
width: 100%;
text-align: center;
}
I also found out that it will never work if you don't specify the width