I have a DropDownButton
<DropDownButton text="i" items={items} />
that has padding around it
How would one remove that padding for just this one button not all of them on the site ?
See for more context
https://codesandbox.io/s/unruffled-snow-cx50hi
You can also pass buttonClass prop to that particular DropDownButton, I have also shown it here.
https://codesandbox.io/s/crazy-forest-1lvs7f?file=/app/main.tsx
Please check the props that are being passed to DropDownButton for a better understanding.
Add below css in a new file called style.css
button {
padding: 0 !important;
}
and import it in main.tsx as
import ./style.css
I'm using styled-system and Emotion now and I can't come to an understanding of which approach is more correct to use. I have some "Box" component, which handles different props like mx, my, px, py, bg, color, and many others from https://styled-system.com/api/.
Sometimes I have the following situations :
I have some "Select" component, which doesn't have styled-system props. And I have to add some margins (for example) to this Select. I can do this in following ways :
import {Select} from 'Select'
<Box
as={Select}
my={32}
ml={10}
/>
Or I can use Emotion's css prop with #styled-system/css and do next :
/** #jsxImportSource #emotion/react */
import {Select} from 'Select'
import css from '#styled-system/css'
<Select
css={css({
my: 32,
ml: 10
)}
/>
For me personally, the css option seems more readable, but I already use the "Box" component in many places of the project and I do not know whether to change their syntax or not.before :
<Box mx={1}/>
after :
div css={css({mx=1})}
Which option in which situation would be more correct?
This is pretty subjective. Your box is not the same as a div. Presumably, you have a border-box rule for the Box component. Let's not get the whole reason for using the box confused. If you just want your select to have all the props of a box, well, it should already have that, assuming your Select definition looks like this
const Select = ({ onClick, ...styleProps }) => <Box {...styleProps}><p>select me</p></Box>
export default Select
I have a dataTable component looke like below:
<template>
<lightning-datatable
class="pw-table"
key-field="id"
columns={columns}
data={data}
hide-checkbox-column
></lightning-datatable>
</template>
Now I want write some custom css to make table header higher,
.pw-table {
height: 300px;
}
but useless, so how I can do it?
I use loadStyle but failed, I dont know why?
import { loadStyle } from 'lightning/platformResourceLoader';
import accountCustom from '#salesforce/resourceUrl/accountCustom';
You should treat Lightning base components as black boxes. The internal elements of an LWC are protected by the Shadow DOM and Lightning Locker. You cannot style them with your CSS, and you cannot interact with them via JavaScript.
You can style the top-level element (which is actually what you've done here), but you can't style elements within the component. See CSS Style Sheets in the Lightning Web Components Dev Guide.
A parent component can style a child component, but it styles it as a single element.
Material-UI adds generated style tags to the <header /> which is of course a standard place for styles, however I need my style tags to be added in a different html element.
I'm looking for a way to transition a legacy CodeIgniter PHP application to React. I have a plan but the issue is that this legacy application is using bootstrap which is messing with my React components.
The plan is to reset all styles in a div and render React components in it. something like:
<div class="clearcss">
<div>
<style type="text/css"></style> // material ui style tags
<div id="react-component"></div>
</div>
</div>
Unfortunately because Material ui adds all of its styles to the header Material ui styles are also reset, but if I could change where material ui places style tags then I think I could make it work.
Actually, in JSS documentation I found examples that show how to specify insertion points outside <head />.
Together with Ryan's comment pointing to material ui documentation I was able to achieve what I wanted.
JSS supports two ways of specifying a custom insertion point for styles:
By adding an html comment (e.g. <!-- custom-jss-insertion-point -->). This is only supported for insertion points in the <head>.
By specifying an element (e.g. insertionPoint: document.getElementById("custom-jss-insertion-point")). This approach supports insertion points in the document body.
Here's a working example of what is needed for the second approach:
index.html -- add an element that styles will be inserted after
...
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="custom-jss-insertion-point"></div>
<div id="root"></div>
</body>
...
App.js -- Tell JSS about the custom insertion point
import React from "react";
import { create } from "jss";
import { StylesProvider, jssPreset } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
const jss = create({
...jssPreset(),
// Define a custom insertion point that JSS will look for when injecting the styles into the DOM.
insertionPoint: document.getElementById("custom-jss-insertion-point")
});
export default function App() {
return (
<StylesProvider jss={jss}>
<div className="App">
<Button variant="contained" color="primary">
Hello
</Button>
</div>
</StylesProvider>
);
}
This results in the styles being added as shown in the image below:
If you render the insertion point element using React, you need to ensure that the element exists before you try to call document.getElementById("custom-jss-insertion-point") while configuring JSS. If it is possible to do so, I would recommend rendering the insertion point element outside of React (as in the example) to avoid order-of-operations complications.
I am trying to apply margins and paddings with React-Bootstrap as props.
I passed the docs through but haven't found any mention adding padding or margin in there as it is in official bootstrap docs (3th and 4th). I know it doesn't support well Bootstrap 4, so tried with both.
I tried to pass params as p={1}, paddingxs={5} or mt='1' but it doesn't recognize any of them. More over tried to find any Spacing element in React-Bootstrap folder, but failed.
Paddings and margins work as classnames. But I feel there must be a way to it without Bootstrap classes. There must be a kind of property.
First include bootstrap CSS in your src/index.js or App.js
import 'bootstrap/dist/css/bootstrap.min.css';
Then you can style your component by passing desired bootstrap CSS class name as className prop in React, for example:
import React from "react"
import Container from "react-bootstrap/Container";
function MyComponent() {
return (
<Container fluid className="p-0">
<SomeOtherComponent />
</Container>
);
}
export default MyComponent
Above code will add p-0 CSS class to Container.
Reference
React - How do I add CSS classes to components?
React-Bootstrap - Stylesheets
You can add margin and padding by using default React's style:
const divStyle = {
marginLeft: '10px',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
Refrenced from here
The answer is: there is no props from React Bootstrap to use margins/paddings.
You can use props for col class, but no for margins.
Example:
<Col className="col-6 col-md-3 mb-3 pt-2">
// there you have a Col component from React-Bootstrap 4
// it has some grid system classes, that you can use as props like this:
https://react-bootstrap.github.io/layout/grid/
<Col xs={6} md={3} className="mb-3 pt-2">
// but as you can see, the native classes of Bootstrap 4 like
// mt, mb, pt, pb etc, they have not a props use with
// React-Bootstrap, you have to use them like regular classes
// inside "className"
You'll want to add className="p-5" to the element. This isn't documented in react-bootstrap but it's in the original Bootstrap 4 documentation here: https://getbootstrap.com/docs/4.4/utilities/spacing/#examples
Usually, I'm able to add custom styles to React Bootstrap components by just adding them to the style param. I've put together a short example below, hope this helps.
import React from 'react';
import { Button } from 'react-bootstrap';
const styles = {
myCoolButton: {
paddingTop: "10vh",
paddingBottom: "10vh",
paddingRight: "10vw",
paddingLeft: "10vw"
}
}
const ReactButton = (props) => {
return (
<Button style={styles.myCoolButton} onClick={()=> {
console.log("Do something here!")
}}>Click Me!</Button>
);
}
export default ReactButton
You can also pass custom components (including those from react-bootstrap) into the styled-components constructor if you prefer to do it that way.
None of the jQuery-free implementations of Bootstrap (React Bootstrap, BootstrapVue or ngBootstrap) have implemented utility directives for spacing (margin/padding), simply because Bootstrap have made it unnecessary in the vast majority of cases, by providing a very intuitive set of Spacing utility classes.
All you need to do is apply the desired class.
To apply utility classes selectively, based on responsiveness interval (media queries), you could use a useMedia hook, as demoed here.
In a nutshell:
const interval = useMedia([
"(min-width: 1200px)",
"(min-width: 992px)",
"(min-width: 768px)",
"(min-width: 576px)"
],
["xl", "lg", "md", "sm"],
"xs"
);
(Based on useMedia from useHooks/useMedia).
You can now reuse this hook throughout your app to add media interval based logic.
Example usages:
// interval === 'sm' ? a : b
// ['xs', 'sm'].includes(interval) ? a : b
// negations of the above, etc...
Important: this particular implementation returns the first matching media query in the list.
If you need to map various media queries, to an object/map with true/false values, you'll need to modify getValue fn to return the entire list, along these lines:
const getValue = () => {
const matches = mediaQueryLists.map(mql => mql.matches);
return values.reduce((o, k, i) => ({...o, [k]: matches[i]}), {})
};
Working example here.
Obviously, you could expand on it and add/remove queries. However, be warned each query adds a separate listener so it could impact performance.
In most cases, the return of the first matching query (first example) is enough.
Note: if the above useMedia hook is not enough for your use case, a more robust and heavily tested solution for media-query listeners in JS is enquire.js. It's easy to use, incredibly light and thoroughly tested cross-browser/cross-device. I have no affiliation with it, but I have used it in various projects over the course of more than a decade. In short, I couldn't recommend it more.
Back to Bootstrap 4: in order to customize the $spacer sizes, follow the guide provided under Bootstrap's theming as it's actually about more than what we typically call theming (changing colors), it's about overriding default values of Bootstrap's SASS defaults, including responsivenss breakpoints, spacers, number of columns and many, many others. The one you're interested in is $spacer.
Simply write the overrides into an .scss file and import it in your root component. Example.
Note: a (simpler and more intuitive) option to customize Bootstrap is to do it visually, using bootstrap.build but it's typically a few minor versions behind (i.e. Bootstrap is now at v4.4.1 and the build tool is at v4.3.0).
The build customizer provides intuitive controls and real time visualization.
It allows export as .css or .scss.
Just try this out once according to your input and still if face any issue you can reach out.In below we have increased the .col padding with .px-md-5 and then countered then with .mx-md-n5 on the parent .row.
JSX:
import React from 'react'
import { MDBContainer, MDBRow, MDBCol } from 'mdbreact';
const SpacingPage = () => {
return (
<MDBContainer>
<MDBRow className="mx-md-n5">
<MDBCol size="6" className="py-3 px-md-5">Custom column padding</MDBCol>
<MDBCol size="6" className="py-3 px-md-5">Custom column padding</MDBCol>
</MDBRow>
</MDBContainer>
)
}
export default SpacingPage;
If you still have any kind of doubt on this then feel free to ask .