Add note about inline styles

This commit is contained in:
Daniel Gasienica 2018-04-15 00:57:12 -04:00
parent b0e1cc49a5
commit 246e0ca87b
2 changed files with 5 additions and 8 deletions

View file

@ -9,6 +9,7 @@
}
.iconButton {
// NOTE: Cannot move these to inline styles as hover breaks due to precedence:
background: transparent;
width: 50px;
height: 50px;

View file

@ -39,7 +39,7 @@ const styles = {
display: 'flex',
flexDirection: 'column',
marginLeft: 10,
} as React.CSSProperties
} as React.CSSProperties,
};
interface IconButtonProps {
@ -47,11 +47,7 @@ interface IconButtonProps {
onClick?: () => void;
}
const IconButton = ({ onClick, type }: IconButtonProps) => (
<a
href="#"
onClick={onClick}
className={classNames('iconButton', type)}
/>
<a href="#" onClick={onClick} className={classNames('iconButton', type)} />
);
export class Lightbox extends React.Component<Props, {}> {
@ -70,7 +66,7 @@ export class Lightbox extends React.Component<Props, {}> {
return (
<div style={styles.container}>
<div style={styles.objectContainer}>
{<img style={styles.image} src={imageURL} />}
<img style={styles.image} src={imageURL} />
</div>
<div style={styles.controls}>
<IconButton type="close" onClick={this.props.close} />
@ -86,5 +82,5 @@ export class Lightbox extends React.Component<Props, {}> {
}
this.props.close();
}
};
}