override global radio stylings and use local styles instead

This commit is contained in:
Eduard Heimbuch
2019-11-26 13:22:00 +01:00
parent 6c023f7d56
commit a1ff55d084
2 changed files with 14 additions and 2 deletions

View File

@@ -1,5 +1,11 @@
import React, { ChangeEvent } from "react"; import React, { ChangeEvent } from "react";
import { Help } from "../index"; import { Help } from "../index";
import styled from "styled-components";
const StyledRadio = styled.label`
margin-right: 0.5em;
`;
type Props = { type Props = {
label?: string; label?: string;
@@ -33,7 +39,7 @@ class Radio extends React.Component<Props> {
because jsx label does not the custom disabled attribute because jsx label does not the custom disabled attribute
but bulma does. but bulma does.
// @ts-ignore */} // @ts-ignore */}
<label className="radio" disabled={this.props.disabled}> <StyledRadio className="radio" disabled={this.props.disabled}>
<input <input
type="radio" type="radio"
name={this.props.name} name={this.props.name}
@@ -44,7 +50,7 @@ class Radio extends React.Component<Props> {
/>{" "} />{" "}
{this.props.label} {this.props.label}
{this.renderHelp()} {this.renderHelp()}
</label> </StyledRadio>
</> </>
); );
} }

View File

@@ -809,6 +809,12 @@ form .field:not(.is-grouped) {
} }
} }
// radio
//overwrite bulma's default margin
.radio + .radio {
margin-left: 0;
}
// cursor // cursor
.has-cursor-pointer { .has-cursor-pointer {
cursor: pointer; cursor: pointer;