1

React ES6 プロジェクトに Material-UI を実装することを検討しています。サンドボックスで何かを試していると、RaisedButton コンポーネントのスタイリングにかなりの癖があることに気付きました。ホバリングすると、ホバー効果がボタンに完全に重ならないボタンの上部または下部に線が表示されることがあります。マージンをオーバーライドすると、動作が変わります。たとえば、8 ピクセルのマージンがある場合、プレーン ボタンには線がありません。6px の余白を追加すると、ボタンの上部に線が表示されます。4px の余白がある場合、下部に線が表示されます。この動作は、HTML 内で異なるコンポーネントが隣り合っている場合にも変わります。

Roboto の代わりに Source Sans を使用していますが、Roboto に戻すと同じ動作になります。同様に、text-transform を none ではなく大文字のままにすると、同じ動作になります。

ボタンを div でラップし、それにマージンまたはパディングを適用して同じ結果を得ようとしました。

Mac OSX 10.11.3 で最新の Chrome を使用しています。

よろしくお願いします。

一貫したスタイルのオーバーライドを可能にするために、カスタム クラスでボタンをラップしています。これが私のラッパーです：

ボタンラッパー

...
let customTheme = ThemeManager.getMuiTheme(CustomTheme)
customTheme.button.textTransform = 'none'
const styles = {
    button: {
        margin: 8
    }
}

@ThemeDecorator(customTheme)
class Button extends React.Component {
    render() {
        return (
            <div className="c-button" style={{ display: 'inline-block' }}>
                <RaisedButton 
                    style={ styles.button }
                    label={ this.props.label }
                    onClick={ this.props.onClick } 
                    primary={ this.props.primary }/>
            </div>
        )
    }
}
...

モーダルラッパー

...
render() {
    const actions = [
        <Button
            label="Cancel" 
            onClick={ this.props.handleClose } />,
        <Button
            label="Submit"
            primary={ true }
            onClick={ this.props.handleClose } />
    ]
    return (
        <Dialog
            title="Dialog With Actions"
            actions={ actions }
            open={ this.props.open } >
            Only actions can close this dialog.
        </Dialog>
    )
}
...

プレーン RaisedButton 自体

...
<ul>
    <li>
        <h4>Plain Button</h4>
         <Button label="Button" onClick={this.handleClick}/>              
     </li>
</ul>
...

モーダルのプレーン RaisedButton

...
<li>
    <h4>Plain Modal</h4>
    <Button label="Modal Dialog" onClick={ this.handleOpen } />
    <Modal
        open={ this.state.open }
        handleClose={ this.handleClose }
        handleOpen={ this.handleOpen } />
</li>
...

これらのスクリーンショットのボタンの上にマウスを置いています。唯一の違いは、最初のマージンが 8px にオーバーライドされることです。

モーダルのボタン モーダルマージンなしのボタン

4

0 に答える 0