I created collapsible sidebar.In side the sidebar that content automatically taken ant design padding value(16px)at the top,right,bottom and left .I need to remove this automatic padding
render() {
return (
<div className="common-coll-bar">
<Collapse >
<Panel header="Present Staffs" style={customPanelStyle}>
<p style={{ height: 550, color: '#131D43', background: '#607B7E', padding: 0 , margin: 0 }}> {text}</p>
</Panel>
</Collapse>
</div>
);
}
Can you help me?
You would have to manually overwrite the styling.
You can add a custom class to panel:
<Panel header="This is panel header 1" key="1" className="custom">
and Add less:
.custom {
.ant-collapse-content-box {
padding: 0;
}
}
https://codepen.io/kossel/pen/gooQqv
You need to theme antd. Doing the proposed solution by Yichaoz will just work for element that holds that class. Which will be harder to maintain, will require extra work, as you need to add that class to every element.
You need to read this https://ant.design/docs/react/customize-theme for a proper solution.
Using CSS modules:
.collapsePanel {
:global(.ant-collapse-content-box) {
padding: 0 !important;
}
}
import the file and use like:
<Collapse className={css["collapsePanel"]}>
...
For me worked only like this with antd#v5.x
Related
I have a Form control, rendering an Antd Form.Item:
const FormEditData: React.FC<FormEditDataProps> = ({ label, name, field, rules, customProps, children }) => {
const namePath = [name].concat('value')
const isEditable = field?.fieldAccess > 0
if (isEditable) {
return (
<Form.Item
label={label}
name={namePath}
className={css.FormEditItem}
rules={rules}
{...customProps}
>
{ children}
</Form.Item >
)
}
return null
}
export { FormEditData }
This is rendering as:
<div class="ant-row ant-form-item FormEditItem___2R86H">
<div class="ant-col ant-form-item-label">
<label for="form-2_employeeLastName_value" class="ant-form-item-required" title="Nachname">Nachname</label>
</div>
<div class="ant-col ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<input type="text" id="form-2_employeeLastName_value" class="ant-input" value="Bar">
</div>
</div>
</div>
</div>
With a css module defined as:
.FormEditItem {
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.FormEditItem div {padding: 0;}
The margin to the .FormEditItem is applied correctly, but I want the padding of the child div with the class annotation ant-col ant-form-item-label changed from 0 0 8px to 0
However I seem to be unable to find a suitable path to that element, so that it gets styled properly.
Tested paths:
.FormEditItem div {padding: 0;} //not specified enough
.FormEditItem div.ant-col {padding: 0;} // not applied
.FormEditItem div.ant-col.ant-form-item-label {padding: 0;} // not applied
.FormEditItem .ant-col {padding: 0;} // not applied
.FormEditItem .ant-col.ant-form-item-label {padding: 0;} // not applied
To apply this change on a global level, we can resolve this by editing a less-variable and apply a custom theme.
The corresponding variable is defined here: https://github.com/ant-design/ant-design/blob/ea2545fbc7d02df4efa1b77467672a681158fec0/components/style/themes/default.less#L373
#form-vertical-label-padding: 0;
Using css
I tried this in my custom style.css file
.ant-col.ant-form-item-label {
padding: 0 !important;
}
NOTE:
Your custom css file should be imported after all other third-party css flies
try this,
add property requiredMark and set value to false like this : requiredMark={false}
in Form.Item component
<Form.Item
label={label}
name={namePath}
rules={rules}
requiredMark={false} //add this
{...customProps}
>
{ children}
</Form.Item >
I'm trying to style a component in my React application, but I do not want to create an external stylesheet because it's a small project. How can I style this image component without using an external stylesheet?
return (
<div>
<Image>
<div>
<img src='./resources/image.png alt='image'>
</div>
</Image>
</div>
);
I've found resources online for using inline styling on a specific element, but I want to make my code clean by putting it at the top of the component like using a style tag at the top of an HTML file. I haven't been able to find anything that resembles this in React.
For inline styles you can define a style object, either at the top of the file, or in your render method, and then refer to it:
var myStyle = { margin: 10 }
return (
<div>
<Image>
<div>
<img style={myStyle} src='./resources/image.png alt='image'>
</div>
</Image>
</div>
)
More info in the docs: https://reactjs.org/docs/dom-elements.html#style
Internal CSS styling in JSX is very similar to how it's done in HTML. The only difference is that you need to declare the style names as variables because they are treated like JS objects. With this in mind, you also need to end each property with a comma instead of a semicolon, and the last property should have no punctuation at the end. Using this approach, you should also use style={} instead of className={}. You can read more about JSX styling here.
const myStyle = {
width: '300px',
height: '300px',
border: '2px solid black'
}
const Image = () => {
return (
<div>
<img style={myStyle} src='./resources/image.png alt='image'>
</div>
);
}
You can do something like this:
const Image = styled.div`
background: #1d9ac2;
img {
border: 1px solid red;
}
`;
There are several solutions for this, and a big debate about which one is "the best".
I don't know which one is the best, but I can tell you which one I use:
Styled components (https://www.styled-components.com/)
With this, you would define an object like this
let styled = require('styled-components');
// Or for fancy people
import styled from 'styled-components';
const Image = styled.div`
background-color: red;
/* You can even put classes or selectors in here that will match the sub-components */
.some_class_used_inside { color: black; }
img { width: 100px }
`
and use it like this
return (
<div>
<Image> {/* This will be the `<div>` with `background-color: red` */}
<div className="some_class_used_inside"> {/* This will now have `color: black` applied */
<img src='./resources/image.png alt='image'> {/* This will have `width: 100px` applied to it */}
</div>
</Image>
</div>
);
Ofcourse, there are many other libraries to do it, and everyone will have to find their own favorite I guess :)
Is it possible to disable react disable react extra div wrapper?
I'm using ES2015.
The wrapper is making two of my style not centering my component in C#.
#First div
.default-content {
margin-right: auto;
margin-left: auto;
padding: 16px 16px 16px 16px;
}
#second div
.full-width {
width:100%;
}
The code looks like this when its rendered.:
<react-container params="component: MontelUI.React.CompactStory, args: {
newsId: 955888, userId: 1003465, bookmarkMainProp: false }">
<div>
<div>hei</div>
</div>
</react-container>
My render function looks like this:
render() {
return (
<div>hei</div>
)
The component is called through custom-tag.
There is an option for this situation. You are not clear about what you meant but as I understood, you have and component which has div and to be able to render multiple components you need to wrap with div. But instead of this you can use Fragments! Try to analyze this link and wrap your component with Fragment not div!
Fragments in React
Like this ->
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
Composition-vs-inheritance React
Documentation
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
https://codepen.io/gaearon/pen/ozqNOV?editors=0010
When you're viewing a pen on CodePen, the styling will most likely be applied by the code in the CSS section. It's possible that there is inline CSS in the HTML, and it's also possible JavaScript is manipulating the styling inline, but in all three instances you'll be dealing with CSS code.
The example you posted is doing all of the styling in the CSS tab. The HTML tab only contains a container for the React elements to render to.
We'll use your FancyBorder function as an example.
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
You're constructing a <div> with the class name of 'FancyBorder-' + props.color, where props.color is a variable that will be used later on.
Continuing with your example, you use the following code to create a welcome dialog:
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1>
Welcome
</h1>
</FancyBorder>
);
}
In this code, you're calling the FancyBorder function and passing through color="blue" which is referenced in the original function as props.color. It now runs 'FancyBorder-' + props.color to generate a class named: FancyBorder-blue.
Now in the CSS section, you'll see your FancyBorder-blue is already setup as a class and has styling applied to it:
.FancyBorder-blue {
border-color: blue;
}
This specific CSS applies a blue border around the box we just created. Hopefully that clears things up.
Figured it out. Those styles when opened in CodePen in edit mode are not visible when tabs are minimized. It's enough to drag them open or change the link so they are opened by default. Just a CodePen feature =)
See the difference:
https://codepen.io/gaearon/pen/ozqNOV?editors=0010
https://codepen.io/gaearon/pen/ozqNOV
.FancyBorder {
padding: 10px 10px;
border: 10px solid;
}
.FancyBorder-blue {
border-color: blue;
}
.Dialog-title {
margin: 0;
font-family: sans-serif;
}
.Dialog-message {
font-size: larger;
}
I'm new to css and I can't figure out how to position one component inside another in React. I can show them separately, but when I put one inside another. I don't see the one inside. I think the problem is in the css file
#homePage{
section{
h1{
text-align: left; //this is shown
}
//here I want to add the other React component but I don't know how
}
}
And the render method:
<div id="homePage">
<Component1>
<section>
<h1>Hi</h1>
<Component2>
</Component2>
</section>
</Component1>
</div>
Thanks.
From what i understand , you could have the className attribute defined inside your Component2's HTML tags.
class Component2 extends Component{
render(){
return(
<section className="component2styles">
This is Component2
</section >
);
} }
Now , you can change ur style sheet as
#homePage{
section{
h1{
text-align: left; //this is shown
}
//components2 style will be nested here
section.component2styles{
border:1px solid blue;
}
}
}
Or as an alternative you can try inline-styles , seems to be gaining a lot of traction in React development.
render(){
var styleobj={color:'red'};
return( <section style={styleobj} > This is Component 2 </section> )
}
Did you add some class/id to your Component2 like <Component2 className="my-specific-class" /> to style it?
(btw, I hope your css is less/sass one to allow nested styles like you did)
EDIT
By adding className attr. to your Component2, I mean adding it in Component2 render method like
render: function() {
return (
<div id="your-id" className="your-class">
some html here
</div>
);
}