CODEWITHSUNDEEP
reactjspaddingthemingcss-specificitysemantic-ui-react
xiaoju
xiaoju

Reputation: 389

Remove padding in stackable Grid.Row

In 'Semantic UI React', I want to remove the vertical padding between stacked rows. Why this inline styling doesn't succeed: style={{ padding: '0rem 0rem !important' }} ?

import React from 'react';
import { Grid, Segment } from 'semantic-ui-react';

function Footer() {
  return (
    <Grid textAlign="center" stackable>
      <Grid.Row 
        divided 
        style={{ padding: '0rem 0rem !important' }}
      >
          <Grid.Column width="two">text_01</Grid.Column>
          <Grid.Column width="two">text_02</Grid.Column>
      </Grid.Row>
    </Grid>
  );
}

export default Footer;

(I want the two text elements to be in the middle of the page. On wide screen: next to each other. On small screen: stacked above each other. In both cases, they shouldn't be too far apart from each other, hence no padding. And each text element shouldn't spread over several lines.)

The only solution I found is to edit semantic-ui-css/semantic.css, replacing padding: 1rem 1rem !important (see below) with padding: 0rem 0rem !important. Then importing that CSS file instead of the usual semantic.min.css.

Is this actually an acceptable way of doing?

.ui.stackable.grid > .row > .wide.column,
.ui.stackable.grid > .wide.column,
.ui.stackable.grid > .column.grid > .column,
.ui.stackable.grid > .column.row > .column,
.ui.stackable.grid > .row > .column,
.ui.stackable.grid > .column:not(.row),
.ui.grid > .stackable.stackable.row > .column {
  width: 100% !important;
  margin: 0em 0em !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  padding: 1rem 1rem !important;
}

NB as I've never used Gulp, I don't want to build a custom theme just for this issue.

Upvotes: 2

Views: 9326

Answers (2)

Andy
Andy

Reputation: 2354

There's also this https://www.npmjs.com/package/react-with-important-style which looks promising.

See below I have basically replaced Grid.Column (which is notoriously hard to remove the padding) with my Wrapped var which calls withImportantStyle.

  var Wrapped = withImportantStyle("div");  

  var columnStyle = {
    padding: "0 !important"
  };

  var segmentStyleButtons = {
    color:"red"
  };

  return (
    <Grid stackable columns={2} reversed="mobile">
      <Wrapped className="column" style={columnStyle}>
        <Segment>
          <List>
            <List.Item as='a'>Reset Password</List.Item>
            <List.Item as='a'>Resend Confirmation Link</List.Item>
          </List>
        </Segment>
      </Wrapped>
      <Wrapped style={columnStyle}>
          <Segment style={{ ...segmentStyleButtons, textAlign: "right" }}>
            <Button.Group>
              <Button primary>Login</Button>
              <Button.Or />
              <Button secondary>Register</Button>
            </Button.Group>
          </Segment>
      </Wrapped>
    </Grid>
  );

Upvotes: 0

xiaoju
xiaoju

Reputation: 389

Answer to myself:

  1. ReactJS "mostly" doesn't support the !important tag within inline styles. Don't use !important inside React inline styles!
  2. probably, learning how to create a custom theme with Gulp would be the way to go.

  3. instead of modifying semantic-ui-css/semantic.css, better create a css file specific to the component you're targetting. In practice:

    • create myComponent.css in same folder as MyComponent.js, and write your new CSS rules there.
    • add import ./myComponent.css inside MyComponent.js.

    • inspect the page with Chrome Developper Tools (for example) and check at the top of the Styles tab which CSS rules currently have highest specificity. The new rule need be more specific. To solve the question, we can add a noPadding class (!important is required to bypass the !important that's already in the existing less-specific rule):

      .ui.stackable.grid > .row > .column.wide.noPadding { padding: 0 !important; }

    • inside MyComponent.js, add the corresponding class:

      <Grid.Column width="two" className="noPadding"> text_01 </Grid.Column>

  4. while creating the new css rules, beware CSS specificity, especially:

    • context doesn't impact specificity: even if MyComponent is nested within BigComponent.js, this doesn't give higher specificity to MyComponent.
    • child selector (>) doesn't increase specificity. The number of selectors does impact specificity. See: CSS: Child selector higher precedence than class selecctor?
  5. for questions regarding semantic-ui-react, best meet the community in their gitter chat room: https://gitter.im/Semantic-Org/Semantic-UI-React

Upvotes: 3

Related Questions